Item
Flexible list item with leading/trailing slots, multi-line support, and interaction states
Item
A flexible, composable component for displaying content with media, title, description and actions. Supports both a compact props API and a fully composable layout API.
Basic item
The simplest form of Item uses the compact API: pass media, title, description and optional actions. Ideal for quick settings or lists.
Dashboard
View your application overview
Messages
You have 12 new messages
Settings
Manage your preferences
Compact props API
Use the compact API for quick usage in settings panels and menus:media, title, description, badge, footer and actions.
Profile
Update your personal information
Last updated 2 hours ago
Pro subscription
Upgrade to unlock all features
Composable layout API
Use ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader and ItemFooter for more complex layouts where you need granular control.
Alex Johnson
Product Designer · Working on design systems
Featured workspace
A highlighted item with header and footer content.
🕐 Last updated 3 hours ago
Variants
Combine visual variants with semantics for success, warning, error and accent states. These work with both compact and component APIs.
Payment successful
Your subscription has been renewed.
Action required
Please verify your email address.
Failed to sync
We couldn’t sync your changes.
New features
Explore the latest updates in your workspace.
Sizes
Adjust density with size="sm", "md" and "lg". Compact sizes work best in lists; large sizes for primary surfaces.
Small item
Dense layout for compact lists
Medium item
Default size for most use cases
Large item
More spacious layout with larger media
Media variants
ItemMedia supports icons, avatars, thumbnails and badges. Use it to visually distinguish different kinds of content.
Inbox
View all messages
Sarah Connor
Engineering Manager
Project Aurora
Design system experiments
Favorites
Saved items and collections
Item groups & separators
Wrap multiple items in ItemGroup to create cards or menus. Use ItemSeparator for dividers or select a divided group variant.
Default group
Home
Go to dashboard
Messages
View your inbox
Settings
Manage your account
Divided group
Notifications
Configure alerts
Favorites
Saved items
Trash
Recently deleted
Navigation lists
Build sidebars or settings menus using clickable items, badges and chevron icons.
Settings navigation
Account
Profile, email and password
Notifications
Notification preferences
Advanced
Security and integrations
Usage Guidelines
When to Use
- List rows
- Menu items
- Settings rows
Accessibility
- List item semantics
- Interactive items focusable
Performance
- Efficient slot rendering
- Minimal wrapper DOM
Common Mistakes
- Too much content in single item
- Not handling text overflow
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support