Docs › Components › Item

Shadcn Item

The shadcn/ui Item lays out a list row with media, a title and description, and trailing actions, styled with Tailwind CSS v4. It gives lists of users, settings, or results a consistent, accessible structure. Items build lists across ShadcnStore application blocks.

Key features

• Slots for media, content, and actions.
• Title and description with consistent spacing.
• Groups and separators for building lists.
• Default and outline variants.
• Can render as a link or button for a clickable row.

Installation

npx shadcn@latest add item

Usage

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from "@/components/ui/item"
import { Button } from "@/components/ui/button"

export function Example() {
  return (
    <Item variant="outline">
      <ItemContent>
        <ItemTitle>Colin Nolan</ItemTitle>
        <ItemDescription>[email protected]</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="outline" size="sm">View</Button>
      </ItemActions>
    </Item>
  )
}

Accessibility

• If the whole row is clickable, make it a single link or button and keep actions separate.
• Use a heading element for the title where it fits the page outline.
• Give action buttons and media clear accessible names.

When to use the Item

Use an Item for rows in a list: members, notifications, files, or search results, where each row has media, text, and an action. For a larger, standalone container, use a Card. For dense tabular data, use a Table.

Used in these blocks

• App shells: list rows and results.
• Teams: member rows.
• Apps: settings and notification lists.

Related components

An Item often contains an Avatar, a Badge, and Button actions; for larger containers use a Card, and for tabular data a Table.

FAQ

What is the shadcn item used for?

The Item lays out a list row with media, a title and description, and trailing actions in a consistent structure, for user lists, settings, and results.

How is Item different from Card?

Item is a compact horizontal row for lists. Card is a larger container that groups content and actions vertically.

Can an item be a link?

Yes. Render the Item as a link or button so the whole row is clickable, keeping actions separate.

How do I build a list of items?

Wrap several Items in an ItemGroup, separated by ItemSeparator.