Item
A row of media, a title, a description and actions, alone or in a list.
A simple item with title and description.
<Item variant="outline"> <ItemContent> <ItemTitle>Basic Item</ItemTitle> <ItemDescription>A simple item with title and description.</ItemDescription> </ItemContent> <ItemActions> <Button size="sm" variant="outline"> Action </Button> </ItemActions></Item>Installation
$ npx shadcn@latest add @constella/itemUsage
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle,} from "@/components/primitives/item";<Item> <ItemMedia variant="icon"> <HugeiconsIcon icon={Notification01Icon} /> </ItemMedia> <ItemContent> <ItemTitle>Title</ItemTitle> <ItemDescription>Description</ItemDescription> </ItemContent> <ItemActions> <Button>Action</Button> </ItemActions></Item>Composition
ItemGroup├── Item│ ├── ItemHeader│ ├── ItemMedia│ ├── ItemContent│ │ ├── ItemTitle│ │ └── ItemDescription│ ├── ItemActions│ └── ItemFooter└── ItemSeparatorVariant
Use the variant prop on Item to set its surface.
Standard styling with subtle background and borders.
Standard styling with subtle background and borders.
Standard styling with subtle background and borders.
| Variant | Surface |
|---|---|
default | None |
outline | A border edge |
secondary | A fillSubtle fill |
<Item variant="outline">…</Item>Size
Use the size prop on Item to set its padding and its media's size.
New messages land here.
New messages land here.
New messages land here.
| Size | Padding | Image |
|---|---|---|
default | 10px × 12px | 40px |
sm | 10px × 12px | 32px |
xs | 8px × 10px | 24px |
<Item size="sm">…</Item>With Icon
Use ItemMedia with variant="icon" for an icon. With a description, the media lines up with the title.
New login detected from unknown device.
<ItemMedia variant="icon"> <HugeiconsIcon icon={Shield01Icon} /></ItemMedia>Item Group
Use ItemGroup for a list of items, and ItemSeparator between them.
shadcn@acme.com
emilkowalski@acme.com
evilrabbit@acme.com
<ItemGroup> <Item>…</Item> <ItemSeparator /> <Item>…</Item></ItemGroup>Item Header
Use ItemHeader and ItemFooter for full-width rows above and below the content, like a title with a tag and a footer with a date and an action.
Hover cards glide between triggers.
Data tables, sidebars and the chat parts.
<Item variant="outline"> <ItemHeader> <ItemTitle>v0.9.0</ItemTitle> <Badge variant="secondary">Latest</Badge> </ItemHeader> <ItemContent> <ItemDescription>Hover cards glide between triggers.</ItemDescription> </ItemContent> <ItemFooter> Today <Button size="sm" variant="ghost"> Read notes </Button> </ItemFooter></Item>Link
Use the render prop to render an item as a link. Only a link or a button answers hover and press.
<Item render={<a href="/docs" />}> <ItemContent> <ItemTitle>Visit our documentation</ItemTitle> </ItemContent></Item>Avatar
Put an Avatar in ItemMedia. Use variant="image" for a plain <img>, which fills the media box.
Last seen 5 months ago
<ItemMedia> <Avatar size="lg"> <AvatarImage alt="" src="/avatars/shadcn.png" /> <AvatarFallback>CN</AvatarFallback> </Avatar></ItemMedia>API Reference
| Part | Adds |
|---|---|
Item | variant: "default", "outline" or "secondary"; size: "default", "sm" or "xs"; render |
ItemMedia | variant: "default", "icon" or "image" |
ItemTitle | render, to make it a heading: render={<h3 />} |
Every part takes sx, applied last. For render, see Base UI useRender.