Item
A versatile component that you can use to display any content.
Made by shadcnPowered by
Installation
When 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> {/* Groups multiple items */}
<Item> {/* Flex container with hover/focus states */}
<ItemHeader /> {/* Optional header section */}
<ItemMedia> {/* Icon, avatar, or image */}
<Icon />
</ItemMedia>
<ItemContent> {/* Main content area (title + description) */}
<ItemTitle /> {/* Primary text */}
<ItemDescription /> {/* Secondary text */}
</ItemContent>
<ItemActions> {/* Action buttons or controls */}
<Button />
</ItemActions>
<ItemFooter /> {/* Optional footer section */}
</Item>
<ItemSeparator /> {/* Visual divider */}
<Item /> {/* Another item */}
</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:
- default: Standard padding and spacing
- sm: Compact padding for 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 asChild>
<a href="/settings">
<ItemMedia variant="icon">
<SettingsIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>Settings</ItemTitle>
<ItemDescription>Manage your account preferences</ItemDescription>
</ItemContent>
</a>
</Item>
// 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>
<Item size="sm">
<ItemMedia variant="icon"><HomeIcon /></ItemMedia>
<ItemContent>
<ItemTitle>Home</ItemTitle>
</ItemContent>
</Item>
<ItemSeparator />
<Item size="sm">
<ItemMedia variant="icon"><SettingsIcon /></ItemMedia>
<ItemContent>
<ItemTitle>Settings</ItemTitle>
</ItemContent>
</Item>
</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 default size for a standard item.
Icon
Avatar
Image
Group
Header
Link
To render an item as a link, use the asChild 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 | "default" | "sm" | "default" |
asChild | boolean | false |
<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>
)
}ItemGroup
The ItemGroup component is a container that groups related items together with consistent styling.
| Prop | Type | Default |
|---|---|---|
className | string |
<ItemGroup>
<Item />
<Item />
</ItemGroup>ItemSeparator
The ItemSeparator component is a separator that separates items in the item group.
| Prop | Type | Default |
|---|---|---|
className | string |
<ItemGroup>
<Item />
<ItemSeparator />
<Item />
</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.
Built by malinskibeniamin. The source code is available on GitHub.