Rows that open in place to reveal details with a smooth height transition, one at a time or several at once.
npx shadcn@latest add https://hyperblur.dev/r/list-expandable-rows.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-expandable-rows.tsx.
import { ListExpandableRows } from "@/components/hyperblur/list-expandable-rows"
<ListExpandableRows defaultValue={["inv-1048"]} multiple />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; title: string; subtitle?: string; meta?: string; icon?: ExpandableRowIconName; color?: string; details?: ReactNode }[] | three invoices | Rows to show. Rows without details are not expandable. ListExpandableDetails renders a label and value grid. |
| value | string[] | Controlled list of open row ids. Pair with onChange. | |
| defaultValue | string[] | [] | Rows open at first when uncontrolled. |
| onChange | (open: string[]) => void | Called whenever a row opens or closes. | |
| multiple | boolean | false | Allow several rows open at once. When false, opening one closes the other. |
| rowHeight | number | 48 | Height of each collapsed row in pixels. |
| accent | string | "#2f7bff" | Accent for the open row border, the chevron and focus rings. |