Item
A flexible container component for displaying content with media, title, description, and actions.
Preview
Overview of your account and activity.
Installation
npx shadcn@latest add https://ui.saturation.io/r/item.jsonUsage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
<Item>
<ItemMedia variant="icon">
<Icon />
</ItemMedia>
<ItemContent>
<ItemTitle>Title</ItemTitle>
<ItemDescription>Description</ItemDescription>
</ItemContent>
<ItemActions>
<Button>Action</Button>
</ItemActions>
</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.
Sizes
Compact item for dense layouts.
Standard item with comfortable spacing.
With Icon
New login detected from unknown device.
With Avatar
Last seen 5 months ago
Invite your team to collaborate on this project.
With Image
A revolutionary new approach to design systems.
Item Group
maxleiter@vercel.com
evilrabbit@vercel.com
With Header
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
With Dropdown
Manage your notification preferences.
API Reference
Item
The main component for displaying content with media, title, description, and actions.
variant?: "default" | "outline" | "muted"
size?: "default" | "sm"
asChild?: booleanItemMedia
Display media content such as icons, images, or avatars.
variant?: "default" | "icon" | "image"On This Page
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.