Components

Item

A flexible list-row primitive that composes media, title, description, and action slots into a single aligned row — the building block for settings lists, file rows, and feeds.

Basic usage

Compose ItemMedia, ItemContent, and ItemActions inside an Item.

Quarterly report

Updated 3 days ago · 2.4 MB

Variants

Three surface treatments — default for in-list rows, outline for standalone cards, and muted for inactive state.

Default

Transparent — sits flush in a list.

Outline

Bordered — reads as a standalone card.

Muted

Soft fill — useful for inactive rows.

Media slots

ItemMedia renders a leading affordance: icon boxes a Lucide glyph, while image clips an avatar or thumbnail.

Icon media

A boxed 32px icon affordance.

Image media

A 40px avatar or thumbnail.

Grouped lists

Wrap rows in an ItemGroup (a role="list" container) and divide them with ItemSeparator. Use asChild to make a whole row a link.

Account settings

Notifications

Billing

Props

Item — the row container.

Prop	Type	Default	Description
`variant`	'default' \| 'outline' \| 'muted'	`'default'`	Surface treatment of the row — transparent, bordered, or soft-filled.
`size`	'default' \| 'sm'	`'default'`	Controls vertical padding and the gap between slots.
`asChild`	boolean	`false`	Merge props onto the child element instead of rendering a div — use to make the whole row a link or button.
`className`	string	`—`	Additional Tailwind classes to merge.
`...rest`	HTMLAttributes<HTMLDivElement>	`—`	All native div props are forwarded.

ItemMedia — the leading affordance. The remaining slots (ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter) forward native element props only.

Prop	Type	Default	Description
`variant`	'default' \| 'icon' \| 'image'	`'default'`	default is unstyled; icon renders a 32px boxed slot; image renders a 40px clipped, rounded slot for an <img>.
`className`	string	`—`	Additional Tailwind classes to merge.

Accessibility

ItemGroup applies role="list" so assistive tech announces the rows as a structured list.
Use asChild with an <a> or <button> so the interactive row is a real, focusable element with native keyboard support.
Interactive rows receive a focus-visible ring using the brand gold ring token, visible on keyboard navigation and hidden on click.
Decorative media (icons, avatars) should be hidden from screen readers — give <img> an empty alt="" and let ItemTitle carry the accessible name.