Components
Loading preview...
Here is Button Group component
npx shadcn@latest add https://21st.dev/r/shadcn/button-group"use client"
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
export default function ButtonGroupNested() {
return (
<ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="sm">
1
</Button>
<Button variant="outline" size="sm">
2
</Button>
<Button variant="outline" size="sm">
3
</Button>
<Button variant="outline" size="sm">
4
</Button>
<Button variant="outline" size="sm">
5
</Button>
</ButtonGroup>
<ButtonGroup>
<Button
variant="outline"
size="icon-sm"
aria-label="Previous"
className="p-1"
>
<ArrowLeftIcon size={14} />
</Button>
<Button
variant="outline"
size="icon-sm"
aria-label="Next"
className="p-1"
>
<ArrowRightIcon size={14} />
</Button>
</ButtonGroup>
</ButtonGroup>
)
}