Components

Item

A single structured row: a leading ItemMedia, an ItemContent with a title and an optional description, and trailing ItemActions. It gives lists and rows a consistent shape.

Preview

Rendered with live Folio tokens. Hover and click the rows, no dark: classes.

Variants

<Item><ItemContent><ItemTitle>Overview</ItemTitle></ItemContent></Item>

<ItemMedia><Folder /></ItemMedia> … <ItemActions><ChevronRight /></ItemActions>

<ItemMedia><Avatar /></ItemMedia> … <ItemDescription>…</ItemDescription>

Email notifications

Send a summary each morning

<ItemMedia><Checkbox /></ItemMedia>

<ItemActions><Badge>Pro</Badge></ItemActions>

Arjun Prakash

arjun@distyl.ai

<ItemActions><Button size="icon-sm">…</Button></ItemActions>

<ItemTitle>Billing</ItemTitle>
<ItemDescription>Invoices, payment method, and plan</ItemDescription>

Leading icons, avatars, or checkboxes in ItemMedia; trailing badges or actions in ItemActions; and an optional ItemDescription all compose into the same row.

States

Default. Resting row.

Hover. The secondary surface fills in (shown statically).

Selected. Set aria-current on the row; click to toggle.

Disabled. Dimmed, inert.

Hover and focus apply only when the row is interactive (rendered as a button or link with asChild). Selected (aria-current) and disabled read on the row itself.

API

Part

Props

Default

Description

Item

variant, size, asChild

variant="default" size="default"

The row. variant is default, outline, or muted. size is default or sm. Use asChild to render a button or link.

ItemMedia

variant

variant="default"

Leading element: an icon, avatar, or checkbox. variant is default, icon, or image.

ItemContent

div props

Holds the title and the description in one column.

ItemTitle

variant

variant="default"

The primary text of the row. variant mono is for identifiers.

ItemDescription

size

size="default"

A secondary line below the title. size xs gives a one-line meta row.

ItemActions

div props

Trailing element: an action, badge, or status.

ItemHeader / ItemFooter

div props

Full-width rows above or below the main row.

ItemGroup / ItemSeparator

div props

A list of items, and a line between two items.

Don't and Do

Don't

Don't use an Item as a navigation link. Moving between pages or sections is the job of a Sidebar nav item or a Navigation Menu link, which carry the right semantics and active states. An Item is a row of content or actions, not a destination.

<Item asChild>
  <button type="button" onClick={open}>
    <ItemMedia><Avatar>…</Avatar></ItemMedia>
    <ItemContent>
      <ItemTitle>Derek Ho</ItemTitle>
      <ItemDescription>derek@distyl.ai</ItemDescription>
    </ItemContent>
    <ItemActions><Badge>Owner</Badge></ItemActions>
  </button>
</Item>

Use Item to build lists, command palettes, settings rows, and any single-row layout that needs consistent leading and trailing composition.

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/shadcn/item";
import { Folder } from "lucide-react";

export function ProjectRow() {
  return (
    <Item asChild>
      <button type="button" onClick={openProjects}>
        <ItemMedia>
          <Folder />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Projects</ItemTitle>
          <ItemDescription>14 active</ItemDescription>
        </ItemContent>
      </button>
    </Item>
  );
}