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.
You can pretty much achieve the same result with the div element and some classes, but I've built this so many times that I decided to create a component for it. Now I use it all the time.
A simple item with title and description.
Installation
npx @gentleduck/cli add item
npx @gentleduck/cli add item
Usage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemHeader,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemHeader,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"<Item>
<ItemHeader>Item Header</ItemHeader>
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
<ItemFooter>Item Footer</ItemFooter>
</Item><Item>
<ItemHeader>Item Header</ItemHeader>
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
<ItemFooter>Item Footer</ItemFooter>
</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.
Examples
Variants
Standard styling with subtle background and borders.
Outlined style with clear borders and transparent background.
Subdued appearance with muted colors for secondary content.
Size
The Item component has different sizes for different use cases. For example, you can use the sm size for a compact item or the default size for a standard item.
A simple item with title and description.
Icon
New login detected from unknown device.
Avatar
Last seen 5 months ago
Invite your team to collaborate on this project.
Image
Group
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
Header
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
Link
To render an item as a link, use the asChild prop. The hover and focus states will be applied to the anchor element.
<Item asChild>
<a href="/dashboard">
<ItemMedia />
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
<ItemActions />
</a>
</Item><Item asChild>
<a href="/dashboard">
<ItemMedia />
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
<ItemActions />
</a>
</Item>Dropdown
API Reference
Item
The main component for displaying content with media, title, description, and actions.
- variant: The variant of the item. Use
"default"for a standard item,"outline"for an outlined item, or"muted"for a muted item. - size: The size of the item. Use
"default"for a standard size or"sm"for a smaller size. - asChild: Renders the item as a child of a custom component. The hover and focus states will be applied to the custom component.
<Item size="" variant="">
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
</Item><Item size="" variant="">
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
</Item>You can use the asChild prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.
import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
export function ItemLink() {
return (
<Item asChild>
<a href="/dashboard">
<ItemMedia variant="icon">
<Home />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>
Overview of your account and activity.
</ItemDescription>
</ItemContent>
</a>
</Item>
)
}import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
export function ItemLink() {
return (
<Item asChild>
<a href="/dashboard">
<ItemMedia variant="icon">
<Home />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>
Overview of your account and activity.
</ItemDescription>
</ItemContent>
</a>
</Item>
)
}ItemGroup
The ItemGroup component is a container that groups related items together with consistent styling.
<ItemGroup>
<Item />
<Item />
</ItemGroup><ItemGroup>
<Item />
<Item />
</ItemGroup>ItemSeparator
The ItemSeparator component is a separator that separates items in the item group.
<ItemGroup>
<Item />
<ItemSeparator />
<Item />
</ItemGroup><ItemGroup>
<Item />
<ItemSeparator />
<Item />
</ItemGroup>ItemMedia
Use the ItemMedia component to display media content such as icons, images, or avatars.
- variant: The variant of the media content. Use
"default"for a default icon or image,"icon"for an icon, or"image"for an image.
<ItemMedia variant="icon">
<Icon />
</ItemMedia><ItemMedia variant="icon">
<Icon />
</ItemMedia><ItemMedia variant="image">
<img src="..." alt="..." />
</ItemMedia><ItemMedia variant="image">
<img src="..." alt="..." />
</ItemMedia>ItemContent
The ItemContent component wraps the title and description of the item.
You can skip ItemContent if you only need a title.
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent><ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>ItemTitle
Use the ItemTitle component to display the title of the item.
<ItemTitle>Item Title</ItemTitle><ItemTitle>Item Title</ItemTitle>ItemDescription
Use the ItemDescription component to display the description of the item.
<ItemDescription>Item description</ItemDescription><ItemDescription>Item description</ItemDescription>ItemActions
Use the ItemActions component to display action buttons or other interactive elements.
<ItemActions>
<Button>Action</Button>
<Button>Action</Button>
</ItemActions><ItemActions>
<Button>Action</Button>
<Button>Action</Button>
</ItemActions>ItemHeader
Use the ItemHeader component to display a header in the item.
<ItemHeader>Item Header</ItemHeader><ItemHeader>Item Header</ItemHeader>ItemFooter
Use the ItemFooter component to display a footer in the item.
<ItemFooter>Item Footer</ItemFooter><ItemFooter>Item Footer</ItemFooter>