Duck List Row
The unit of a journal index, a project list, a changelog: ordinal, title, meta, and a rule that grows in on hover.
NavigationServer safe
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-list-rowPulls in @duck/theme, @duck/hud-label. Already installed items are skipped.
Usage
import { DuckListRow } from "@/components/ui/duck-list-row"The file lands in components/ui/duck-list-row.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| index | React.ReactNode | - | Ordinal in the list. A string, so "01" keeps its zero. |
| title | React.ReactNode | - | The headline. |
| description | React.ReactNode | - | A line under the title. |
| meta | React.ReactNode | - | Date, tag, reading time — the quiet half of the row. |
| trailing | React.ReactNode | - | Right edge: a chevron, a value, a badge. |
| asChild | boolean | false | Render the child element as the row, for a whole-row link. The row supplies its own content, so the child is written bare: <a href="…" />. |
Rules
What keeps this component from turning into noise.
- A row that is a link should be one anchor. Not an anchor around the title with a card around that — one focus stop, one hover target.
- The leading rule is a scaleY transform rather than a width, so the hover costs a composited property and nothing on the main thread.