Item
A versatile component that you can use to display any content.
Powered by
Shadcn UIInstallation
npx shadcn@latest add @redpanda/itempnpm dlx shadcn@latest add @redpanda/itemyarn dlx shadcn@latest add @redpanda/itembunx shadcn@latest add @redpanda/itemnubx shadcn@latest add @redpanda/itemaube dlx shadcn@latest add @redpanda/itemWhen to use
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.
Use this decision tree to determine when to use the Item component:
Usage
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>Anatomy
The Item component is a flexible container for displaying content. Here’s how the components work together:
<ItemGroup> <li> <Item> <ItemHeader /> <ItemMedia> <Icon /> </ItemMedia> <ItemContent> <ItemTitle /> <ItemDescription /> </ItemContent> <ItemActions> <Button /> </ItemActions> <ItemFooter /> </Item> <ItemSeparator /> </li> <li> <Item /> </li></ItemGroup>Layout Structure
- ItemGroup: Container that groups multiple items with consistent styling
- Item: Root flex container with hover/focus states and sizing variants
- ItemHeader: Optional header displayed above the main content
- ItemMedia: Container for visual elements (icons, avatars, images)
- ItemContent: Flex column grouping title and description
- ItemTitle: Primary heading text
- ItemDescription: Secondary supporting text
- ItemActions: Container for buttons or interactive elements
- ItemFooter: Optional footer displayed below the main content
- ItemSeparator: Visual divider between items in a group
Variants and Sizes
Item supports variants via the variant prop:
- default: Standard styling
- outline: With border
- muted: Muted background
Item supports sizes via the size prop:
- md: Standard padding and spacing
- sm: Compact padding for dense layouts
- xs: Extra-compact padding for very dense layouts
Typical Usage Patterns
// Simple item with icon<Item> <ItemMedia variant="icon"> <FileIcon /> </ItemMedia> <ItemContent> <ItemTitle>Document.pdf</ItemTitle> <ItemDescription>2.4 MB · Modified 2 hours ago</ItemDescription> </ItemContent></Item>
// Item with avatar and actions<Item> <ItemMedia> <Avatar> <AvatarImage src="..." /> <AvatarFallback>JD</AvatarFallback> </Avatar> </ItemMedia> <ItemContent> <ItemTitle>John Doe</ItemTitle> <ItemDescription>john@example.com</ItemDescription> </ItemContent> <ItemActions> <Button variant="ghost" size="sm">Follow</Button> </ItemActions></Item>
// Clickable item (as link)<Item render={ <a href="/settings"> <ItemMedia variant="icon"> <SettingsIcon /> </ItemMedia> <ItemContent> <ItemTitle>Settings</ItemTitle> <ItemDescription>Manage your account preferences</ItemDescription> </ItemContent> </a> }/>
// Item with header and footer<Item variant="outline"> <ItemHeader> <Badge>New</Badge> </ItemHeader> <ItemContent> <ItemTitle>Feature Update</ItemTitle> <ItemDescription>Check out our latest features</ItemDescription> </ItemContent> <ItemFooter> <Button variant="link" size="sm">Learn more →</Button> </ItemFooter></Item>
// List of items<ItemGroup> <li> <Item size="sm"> <ItemMedia variant="icon"><HomeIcon /></ItemMedia> <ItemContent><ItemTitle>Home</ItemTitle></ItemContent> </Item> <ItemSeparator /> </li> <li> <Item size="sm"> <ItemMedia variant="icon"><SettingsIcon /></ItemMedia> <ItemContent><ItemTitle>Settings</ItemTitle></ItemContent> </Item> </li></ItemGroup>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
Variant
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 md size for a standard item.
Icon
Avatar
Image
Group
Header
Link
To render an item as a link, use the render prop. The hover and focus states will be applied to the anchor element.
Dropdown
API Reference
Item
The main component for displaying content with media, title, description, and actions.
| Prop | Type | Default |
|---|---|---|
variant |
"default" | "outline" | "muted" |
"default" |
size |
"md" | "sm" | "xs" |
"md" |
render |
React.ReactElement |
— |
<Item size="md" variant="outline"> <ItemMedia /> <ItemContent> <ItemTitle>Item</ItemTitle> <ItemDescription>Item</ItemDescription> </ItemContent> <ItemActions /></Item>You can use the render 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 render={ <a href="/dashboard"> <ItemMedia variant="icon"> <Home /> </ItemMedia> <ItemContent> <ItemTitle>Dashboard</ItemTitle> <ItemDescription>Overview of your account and activity.</ItemDescription> </ItemContent> </a> } /> );}ItemGroup
The ItemGroup component is a native ul. Wrap every item in a li; keep separators inside the preceding list item. A linked Item stays a link inside that list item instead of replacing its link role with listitem. Its ref points to HTMLUListElement.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemGroup> <li> <Item /> </li> <li> <Item /> </li></ItemGroup>ItemSeparator
The ItemSeparator component is a separator that separates items in the item group.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemGroup> <li> <Item /> <ItemSeparator /> </li> <li> <Item /> </li></ItemGroup>ItemMedia
Use the ItemMedia component to display media content such as icons, images, or avatars.
| Prop | Type | Default |
|---|---|---|
variant |
"default" | "icon" | "image" |
"default" |
className |
string |
<ItemMedia variant="icon"> <Icon /></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.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemContent> <ItemTitle>Item</ItemTitle> <ItemDescription>Item</ItemDescription></ItemContent>ItemTitle
Use the ItemTitle component to display the title of the item.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemTitle>Item Title</ItemTitle>ItemDescription
Use the ItemDescription component to display the description of the item.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemDescription>Item description</ItemDescription>ItemActions
Use the ItemActions component to display action buttons or other interactive elements.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemActions> <Button>Action</Button> <Button>Action</Button></ItemActions>ItemHeader
Use the ItemHeader component to display a header in the item.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemHeader>Item Header</ItemHeader>ItemFooter
Use the ItemFooter component to display a footer in the item.
| Prop | Type | Default |
|---|---|---|
className |
string |
<ItemFooter>Item Footer</ItemFooter>Props
Credits
- We take our inspiration from Shadcn UI for the
itemcomponent and style.