Item

A row with media, a title, a description and actions, for lists of sources, files, or clinicians.

When to use

A row in a list of similar things: sources, files, clinicians, API keys.
A row with media, a title, a description and actions.

When not to use

Data users compare across columns: use Table.
A standalone block with several sections: use Card.

Install

npx shadcn@latest add @clinia/item

Lab results

Synced 2 minutes ago · 12,408 records

Imaging

Waiting for credentials

Create a workspace and get API access

Getting started · Updated 4 Sep 2026

Marketing (Sera)

Lab results

Synced 2 minutes ago · 12,408 records

Imaging

Waiting for credentials

Create a workspace and get API access

Getting started · Updated 4 Sep 2026

Anatomy

Lab results

Synced 2 minutes ago

1Containerdata-slot="item"border-border · rounded-lg
2Mediadata-slot="item-media"size-4 icon
3Content: title and descriptiondata-slot="item-content"text-sm · text-muted-foreground
4Actionsdata-slot="item-actions"gap-2

Clinia rules

outline is for standalone rows and muted for a secondary or pending row. default has no border.
Sizes are default, sm and xs. Keep one density per list.
Actions sit at the end of the row, in ItemActions. Keep them secondary: outline or ghost buttons.
The title clamps to one line and the description to two. Keep the key information at the start.
In Sera, ItemTitle is a label: uppercase text-xs that clamps to one line. Keep it to a name or a category of a few words, and put a sentence or a headline in ItemDescription or a heading.

Do and don't

Lab results

Synced 2 minutes ago

Do keep one secondary action at the end of the row.

Lab results

Synced 2 minutes ago

Don't fill the row with main buttons.

States: product (Luma)

default

Lab results

Synced 2 minutes ago

outline

Lab results

Synced 2 minutes ago

muted

Lab results

Synced 2 minutes ago

long title

Lab results and imaging reports from every clinic

Synced 2 minutes ago

Toggle the site theme to review both themes.

States: marketing (Sera)

default

Lab results

Synced 2 minutes ago

outline

Lab results

Synced 2 minutes ago

muted

Lab results

Synced 2 minutes ago

long title

Lab results and imaging reports from every clinic

Synced 2 minutes ago

Toggle the site theme to review both themes.

Sizes

Size	Padding x	Gap	Radius	Type
default	px-4 · 16px	gap-3.5 · 14px	--radius-lg	text-sm · 14px
sm	px-3.5 · 14px	gap-3.5 · 14px	--radius-lg	text-sm · 14px
xs	px-3 · 12px	gap-2.5 · 10px	--radius-lg	text-sm · 14px

Accessibility

Built in

render={<a href="…" />} makes the whole row a link: it takes the bg-foreground/4 hover tint, never underlines, and shows the Trust focus border.

Your responsibility

ItemGroup renders role="list". Give each Item inside it role="listitem", or screen readers get a list with no items.
A row that is a link can't also hold buttons: nested controls break keyboard and screen reader use. Pick one.
If the app underlines links on hover, keep that rule in @layer base. An unlayered rule beats the row's no-underline and underlines every line in it.
Give image media alt text, or alt="" when the title already says it.

How to test

With a screen reader, the group is announced as a list with its number of items.
Press Tab: focus moves to each row link, or to each action, in reading order.
Toggle the site theme: outline and muted rows stay distinct in both.

API

Item

Prop	Values	Default	Description
variant	`defaultoutlinemuted`	`default`	`outline` for standalone rows, `muted` for a secondary or pending row.
size	`defaultsmxs`	`default`	Density: `default`, `sm` or `xs` padding.

ItemMedia

Prop	Values	Default	Description
variant	`defaulticonimage`	`default`	`icon` sizes an unsized icon to 16px. `image` crops an image to a square that follows the item's size.

All other props come from the native div element.