Item

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

Installation

npx shadcn@latest add item

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="item" title="components/ui/item.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

Item vs Field

Use Field if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use Item.

Variant

Use the variant prop to change the visual style of the item.

<ComponentPreview styleName="base-nova" name="item-variant" previewClassName="h-96" />

Size

Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

<ComponentPreview styleName="base-nova" name="item-size" previewClassName="h-96" />

Examples

Icon

Use ItemMedia with variant="icon" to display an icon.

Avatar

You can use ItemMedia with variant="avatar" to display an avatar.

Image

Use ItemMedia with variant="image" to display an image.

Group

Use ItemGroup to group related items together.

<ComponentPreview styleName="base-nova" name="item-group" previewClassName="h-96" />

Header

Use ItemHeader to add a header above the item content.

<ComponentPreview styleName="base-nova" name="item-header" previewClassName="h-96" />

Link

Use the render prop to render the item as a link. The hover and focus states will be applied to the anchor element.

<Item render={<a href="/dashboard" />}>
  <ItemMedia variant="icon">
    <HomeIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Dashboard</ItemTitle>
    <ItemDescription>Overview of your account and activity.</ItemDescription>
  </ItemContent>
</Item>

Dropdown

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

Item

The main component for displaying content with media, title, description, and actions.

ItemGroup

A container that groups related items together with consistent styling.

<ItemGroup>
  <Item />
  <Item />
</ItemGroup>

ItemSeparator

A separator between items in a group.

<ItemGroup>
  <Item />
  <ItemSeparator />
  <Item />
</ItemGroup>

ItemMedia

Use ItemMedia to display media content such as icons, images, or avatars.

<ItemMedia variant="icon">
  <Icon />
</ItemMedia>

<ItemMedia variant="image">
  
</ItemMedia>

ItemContent

Wraps the title and description of the item.

<ItemContent>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>

ItemTitle

Displays the title of the item.

<ItemTitle>Item Title</ItemTitle>

ItemDescription

Displays the description of the item.

<ItemDescription>Item description</ItemDescription>

ItemActions

Container for action buttons or other interactive elements.

<ItemActions>
  <Button>Action</Button>
</ItemActions>

ItemHeader

Displays a header above the item content.

<Item>
  <ItemHeader>Header</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>

ItemFooter

Displays a footer below the item content.

<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>Footer</ItemFooter>
</Item>