Generic List
Schema-aware list system with selection, keyboard navigation, and accessible defaults.
Note
Virtualization props are included for forward compatibility, but virtualization is not implemented in this version.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-listFeatures
- Schema-Based: Define primary, secondary, meta, and trailing fields.
- Selection: Single or multi-select with built-in checkboxes.
- Keyboard Navigation: Arrow key navigation with selection support.
- Variants: Default, card, compact, and separated styles.
- Empty/Loading States: Defaults included, override as needed.
Basic Usage
import { GenericList } from "@/components/systems/generic-list/generic-list"
const schema = {
primary: "name",
secondary: "email",
avatar: "avatarUrl",
trailing: { key: "status", type: "badge" },
}
<GenericList
data={users}
schema={schema}
selectable="multiple"
onItemClick={(user) => console.log(user)}
/>Custom Field Rendering
Use field render to customize output per field.
const schema = {
primary: {
key: "name",
render: (value) => <strong>{String(value)}</strong>,
},
secondary: "email",
meta: [{ key: "lastSeen", type: "date" }],
}API Reference
| Prop | Type | Notes |
|---|---|---|
| data | T[] | Items must include id |
| schema | ListSchema | Primary/secondary/meta mapping |
| selectable | "none" | "single" | "multiple" | Selection mode |
| variant | "default" | "card" | "compact" | "separated" | Visual style |
| dividers | boolean | Show separators |
| renderItem | (props) => ReactNode | Custom item renderer |
| virtualized / estimatedItemHeight | boolean / number | Reserved for future support |