Item
Flexible list item family with media, content, and actions slots. Three variants: default, outline, and muted. Server-compatible plain markup.
Preview
New comment on your post
Jane left a reply 2 minutes ago
Team mention in #general
Alex mentioned the team 1 hour ago
Your project was starred
layout-ui received 12 new stars
Installation
bash
npx shadcn@latest add @layout/itemUsage
tsx
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup, ItemSeparator } from "@/registry/layout/item/item";Examples
File list with actions
design-system.pdf
Uploaded today
brand-guidelines.zip
Uploaded today
logo-assets.svg
Uploaded today
Settings navigation
General
Notifications
Guidelines for AI agents
Compose Item with ItemMedia (icon container), ItemContent wrapping ItemTitle and ItemDescription, and ItemActions for trailing buttons or badges. Group related items inside ItemGroup and divide sections with ItemSeparator. Use the outline variant for standalone items that need visible containment, muted for secondary items in a dense list.
Never
- Neveruse Item as an interactive element without wrapping it in a button or anchor; it is a display primitive
- Nevernest ItemGroup inside ItemGroup; use ItemSeparator to separate sections within a single group
- Neverplace more than one ItemActions child that triggers navigation; keep trailing actions supplementary
- Neverhardcode padding inside Item children; the component's gap and padding tokens already space them correctly
Tokens consumed
--layout-accent--layout-accent-fg--layout-muted--layout-muted-fg--layout-border--layout-radius--layout-duration-base