Item
A versatile component for displaying content with media, title, description, and actions.
A simple item with title and description.
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 Item.Group component to create a list of items.
Installation
Usage
<Item variant=Outline>
<Item.Content>
<Item.Title> {"Title"->React.string} </Item.Title>
<Item.Description> {"Description"->React.string} </Item.Description>
</Item.Content>
<Item.Actions>
<Button> {"Action"->React.string} </Button>
</Item.Actions>
</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.
Transparent background with no border.
Outlined style with a visible border.
Muted background for secondary content.
Size
Use the size prop to change the size of the item. Available sizes are default, sm, and xs.
The standard size for most use cases.
A compact size for dense layouts.
The most compact size available.
Examples
Icon
Use Item.Media with variant=Icon to display an icon.
New login detected from unknown device.
Avatar
You can use Item.Media with variant=Avatar to display an avatar.
Last seen 5 months ago
Invite your team to collaborate on this project.
Image
Use Item.Media with variant=Image to display an image.
Group
Use Item.Group to group related items together.
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
Header
Use Item.Header to add a header above the item content.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
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" />}>
<Item.Media variant=Icon>
<HomeIcon />
</Item.Media>
<Item.Content>
<Item.Title>Dashboard</Item.Title>
<Item.Description>Overview of your account and activity.</Item.Description>
</Item.Content>
</Item>Dropdown
API Reference
Item
The main component for displaying content with media, title, description, and actions.
Item.Group
A container that groups related items together with consistent styling.
<Item.Group>
<Item />
<Item />
</Item.Group>Item.Separator
A separator between items in a group.
<Item.Group>
<Item />
<Item.Separator />
<Item />
</Item.Group>Item.Media
Use Item.Media to display media content such as icons, images, or avatars.
<Item.Media variant=Icon>
<Icon />
</Item.Media><Item.Media variant=Image>
<img src="..." alt="..." />
</Item.Media>Item.Content
Wraps the title and description of the item.
<Item.Content>
<Item.Title> {"Title"->React.string} </Item.Title>
<Item.Description> {"Description"->React.string} </Item.Description>
</Item.Content>Item.Title
Displays the title of the item.
<Item.Title> {"Item Title"->React.string} </Item.Title>Item.Description
Displays the description of the item.
<Item.Description> {"Item description"->React.string} </Item.Description>Item.Actions
Container for action buttons or other interactive elements.
<Item.Actions>
<Button> {"Action"->React.string} </Button>
</Item.Actions>Item.Header
Displays a header above the item content.
<Item>
<Item.Header> {"Header"->React.string} </Item.Header>
<Item.Content>...</Item.Content>
</Item>Item.Footer
Displays a footer below the item content.
<Item>
<Item.Content>...</Item.Content>
<Item.Footer> {"Footer"->React.string} </Item.Footer>
</Item>