Item
A record row for master-detail panes: one stretched target, controls above it, current and selected fills, unread weight.
Quarterly planning notes
Ana Ruiz · Attached are the notes from Tuesday.
Nightly build 4182 passed
Build server · All 1,204 checks passed.
Invitation: Design review
Calendar · Thursday 14:00 in the small room.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { ItemGroup, Item, ItemLink, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemControl, ItemCheck, ItemUnread, ItemHeader, ItemFooter, ItemSeparator } from "@fabrials/ui";Or install it under shadcn's name, so code that imports
@/components/ui/itemgets this control. See shims.npx shadcn@latest add @fabrials/item
API reference
| Prop / export | Type | Description |
|---|---|---|
ItemGroup bordered | boolean | A ul that is the size container its rows answer to. bordered adds a hairline above the first row; every row carries its own hairline below. |
Item current | boolean | The record open in the detail pane: a soft Stormlight fill and a 2 px bar on the inline-start edge. Give its link current too (aria-current true). |
Item selected | boolean | Picked for a bulk action: the fill, no bar. A checked native checkbox inside an ItemCheck does it without this prop. |
Item unread | boolean | The title takes weight 600. Add ItemUnread and a screen-reader word inside the link. |
Item stretch | boolean | The link or button of the title covers the whole row and hover paints the row. Controls (ItemActions, ItemControl, ItemCheck) sit above it and stay separate targets. The focus ring is drawn inside the row so a scrolling parent never clips it. |
Item variant / size | default | outline | muted / default | sm | outline and muted are standalone boxed items; default is a row of a list. |
ItemLink current / render | boolean | page | true / ReactElement | The stretched target. render={<button />} makes a row that selects instead of navigating (aria-pressed says which); pass the host's router link the same way. |
ItemMedia variant | default | icon | image | Leading visual. |
Behavior
The root carries only the row: a 44 px minimum, a hairline below, hover, current and selected. The slots lay themselves out in a row only when they are direct children, so a host that draws its own grid inside the row adds nothing. Below 24rem of the group's width the actions wrap under the text. Never give a slot position, transform or contain: it would become the containing block of the stretched target.