Components / Data display
FilterChip
Toggleable filter control with optional counts.
Preview
1import { FilterChipBar } from "@/components/ui/filter-chip"2
3export function FilterChipDemo() {4 return (5 <FilterChipBar6 activeKey="all"7 onChange={(key) => console.log(key)}8 chips={[9 { key: "all", label: "All", count: 12 },10 { key: "mine", label: "Mine", count: 4 }11 ]}12 />13 )14}mine
The mine style of this component.
1import { FilterChipBar } from "@/components/ui/filter-chip"2
3export function FilterChipDemo() {4 return (5 <FilterChipBar6 activeKey="all"7 onChange={(key) => console.log(key)}8 chips={[9 { key: "all", label: "All", count: 12 },10 { key: "mine", label: "Mine", count: 4 }11 ]}12 />13 )14}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/filter-chipUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.