All components
Filter Chips
InputsA row of chips where clicking one makes it the active filter.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/filter-chips.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/filter-chips.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| chips | string[] | - | Chip labels, in order. |
| active | number | 0 | Initially active index. |
| onChange | (index: number) => void | - | Called with the new index on selection. |
Accessibility
- aria-pressed marks the active chip for assistive tech.
- Selection changes background and border, not colour alone.
- Wraps to multiple lines rather than scrolling out of reach.
Dependencies
motionclsxtailwind-merge