All components
Button Group
ButtonsA joined, segmented button group.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/button-group.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/button-group.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | - | Option labels, in order. |
| active | number | 0 | Initially selected index. |
| onChange | (index: number) => void | - | Called with the new index. |
Accessibility
- aria-pressed marks the selected option for assistive tech.
- Selection changes background and text colour together.
- Real buttons, so keyboard activation works without extra wiring.
Dependencies
clsxtailwind-merge