A row of bracket-cornered filter chips with single or multiple selection, an All option and arrow key navigation.
npx shadcn@latest add https://hyperblur.dev/r/hud-filter-chips.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-filter-chips.tsx.
import { HudFilterChips } from "@/components/hyperblur/hud-filter-chips"
<HudFilterChips multiple onChange={(ids) => console.log(ids)} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { id: string; label: string; count?: number }[] | All, XR, Map, Tool, Graphics | Chips to show. A count renders as a dim number after the label. |
| value | string[] | Controlled selected ids. Pair with onChange. | |
| defaultValue | string[] | ["all"] | Initial selection when uncontrolled. Falls back to the All option or the first chip. |
| onChange | (value: string[]) => void | Called with the new list of selected ids. | |
| multiple | boolean | false | Allow several chips at once. Picking All clears the others, clearing everything returns to All. |
| allId | string | "all" | Id of the chip that means no filter. |
| label | string | "Filter" | Accessible name of the toolbar. |
| accent | string | "#ff4d4d" | Glow and bracket color of active chips. |