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.
Copy import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/components/ui/item" Copy < Item > < ItemMedia variant = "icon" > < Icon /> </ ItemMedia > < ItemContent > < ItemTitle > Title </ ItemTitle > < ItemDescription > Description </ ItemDescription > </ ItemContent > < ItemActions > < Button > Action </ Button > </ ItemActions > </ Item > Use the following composition to build an Item:
Copy ItemGroup └── Item ├── ItemHeader ├── ItemMedia ├── ItemContent │ ├── ItemTitle │ └── ItemDescription ├── ItemActions └── ItemFooter 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.
Use the variant prop to change the visual style of the item.
Default Variant
Transparent background with no border.
Outline Variant
Outlined style with a visible border.
Muted Variant
Muted background for secondary content.
Use the size prop to change the size of the item. Available sizes are default, sm, and xs.
Default Size
The standard size for most use cases.
Small Size
A compact size for dense layouts.
Use ItemMedia with variant="icon" to display an icon.
Security Alert
New login detected from unknown device.
Review
You can use ItemMedia with variant="avatar" to display an avatar.
ER
Evil Rabbit
Last seen 5 months ago
No Team Members
Invite your team to collaborate on this project.
Invite
Use ItemMedia with variant="image" to display an image.
Use ItemGroup to group related items together.
s
shadcn
jacob@anotherui.dev
m
maxleiter
maxleiter@vercel.com
e
evilrabbit
evilrabbit@vercel.com
Use ItemHeader to add a header above the item content.
v0-1.5-sm
Everyday tasks and UI generation.
v0-1.5-lg
Advanced thinking or reasoning.
v0-2.0-mini
Open Source model for everyone.
Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.
Copy < Item asChild > < a href = "/dashboard" > < ItemMedia variant = "icon" > < HouseIcon weight = "duotone" /> </ ItemMedia > < ItemContent > < ItemTitle > Dashboard </ ItemTitle > < ItemDescription > Overview of your account and activity. </ ItemDescription > </ ItemContent > </ a > </ Item > To enable RTL support, see the RTL configuration guide .
The main component for displaying content with media, title, description, and actions.
A container that groups related items together with consistent styling.
Copy < ItemGroup > < Item /> < Item /> </ ItemGroup > A separator between items in a group.
Copy < ItemGroup > < Item /> < ItemSeparator /> < Item /> </ ItemGroup > Use ItemMedia to display media content such as icons, images, or avatars.
Copy < ItemMedia variant = "icon" > < Icon /> </ ItemMedia > Copy < ItemMedia variant = "image" > < img src = "..." alt = "..." /> </ ItemMedia > Wraps the title and description of the item.
Copy < ItemContent > < ItemTitle > Title </ ItemTitle > < ItemDescription > Description </ ItemDescription > </ ItemContent > Displays the title of the item.
Copy < ItemTitle > Item Title </ ItemTitle > Displays the description of the item.
Copy < ItemDescription > Item description </ ItemDescription > Container for action buttons or other interactive elements.
Copy < ItemActions > < Button > Action </ Button > </ ItemActions > Displays a header above the item content.
Copy < Item > < ItemHeader > Header </ ItemHeader > < ItemContent > ... </ ItemContent > </ Item > Displays a footer below the item content.
Copy < Item > < ItemContent > ... </ ItemContent > < ItemFooter > Footer </ ItemFooter > </ Item > 
