Item

A list row of media, a title, a description, and actions, that can render as a link.

Quarterly review

Thursday, 14:00 to 15:00, with the finance team.

Your bank account is connected

Profile

Name, email, and avatar.

Billing

Plans, invoices, and payment methods.

When to use

Use when: Rows of media, text, and actions in a list, such as members, files, or settings.
Avoid when: The rows need columns people compare across; use Table.

Installation

bunx shelf add item

The source lands in src/components/ui/item.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Item from "@/components/ui/item";
import { Button } from "@/components/ui/button";

<Item.Group>
  <Item.Root variant="outline">
    <Item.Media variant="icon"><CalendarIcon /></Item.Media>
    <Item.Content>
      <Item.Title>Weekly sync</Item.Title>
      <Item.Description>Mondays at 10:00</Item.Description>
    </Item.Content>
    <Item.Actions><Button size="sm" variant="outline">Edit</Button></Item.Actions>
  </Item.Root>
  <Item.Separator />
  …
</Item.Group>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Separator, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.