GitHub Stars

Item

A versatile component for displaying content with media, title, description, and actions.

Your profile has been verified.

All account security checks passed.

Security alert

New login detected from an unknown device.

The Item component is a flex container for content rows, compact cards, and navigation targets. Use it to display media, title, description, metadata, and actions. Group related rows with ItemGroup.

Installation

npx shadcn@latest add @fulldev/item

Usage

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

<Item>
  <ItemMedia variant="icon">
    <Icon name="house" />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Dashboard</ItemTitle>
    <ItemDescription>Overview of your account and activity.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Open</Button>
  </ItemActions>
</Item>

Composition

Use the following composition to build an Item:

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Item vs Field

Use Field when the row contains a form control such as an input, checkbox, radio, select, switch, or textarea.

Use Item when the row displays content such as a title, description, media, metadata, links, and actions.

Variant

Use the variant prop to change the visual style of the item. Available variants are default, inset, outline, and muted.

Default variant

Transparent background with no border.

Outline variant

Outlined style with a visible border.

Inset variant

Ghost style with negative horizontal margins for edge alignment.

Muted variant

Muted background for secondary content.

Size

Use the size prop to change spacing and density. Available sizes are default, sm, and xs.

Default size

The standard size for most use cases.

Small size

A compact size for dense layouts.

Extra small size

The most compact size available.

Examples

Icon

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

Security alert

New login detected from an unknown device.

Avatar

Place an Avatar inside ItemMedia for people, teams, and accounts.

ER
Evil Rabbit

Last seen 5 months ago

No team members

Invite your team to collaborate on this project.

Image

Use ItemMedia with variant="image" to display a thumbnail image.

City lights
Midnight City Lights

Electric Nights

3:45

Neon Dreams

Coffee cup
Coffee Shop Conversations

Urban Stories

4:05

The Morning Brew

Group

Use ItemGroup to group related items together. Add ItemSeparator when the group needs explicit dividers.

S
shadcn

shadcn@vercel.com

M
maxleiter

maxleiter@vercel.com

Use ItemHeader and ItemFooter for supplemental content above and below the main item content.

Model Fast
v0-1.5-sm

Everyday tasks and UI generation.

Low latency General purpose

Pass href to render the root item as an anchor. Hover and focus states apply to the link element.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

API Reference

Item

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

PropTypeDefault
variant"default" | "inset" | "outline" | "muted""default"
size"default" | "sm" | "xs""default"
hrefstring-

ItemGroup

A container that groups related items together with consistent spacing.

<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.

PropTypeDefault
variant"default" | "icon" | "image""default"
<ItemMedia variant="icon">
  <Icon />
</ItemMedia>

<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>

ItemContent

Wraps the title, description, or secondary metadata 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>

Notes

  • Item follows the shadcn Item API where it maps cleanly to Astro. In Astro, pass href to render a link instead of React’s render prop.
  • Use ItemContent to group the title and description instead of hand-rolled wrappers.
  • Use variants and sizes for emphasis and density before adding custom surface styles.
  • Use variant="inset" when a ghost item should visually align with surrounding content while keeping its hover and focus padding.