Shadcn Item Examples: List Rows with Media, Text, and Actions
The shadcn item component is a versatile row layout for displaying content with a media slot, a title, a description, and trailing actions. It solves the flexbox layout you rebuild constantly, icon left, text stacked in the middle, button on the right, with a single Tailwind CSS styled react list component that stays aligned no matter which parts you include.
Collected here are 10 item examples, Item 1 through Item 10, covering avatar rows, icon headers, outline and muted variants, linked items, and grouped lists with separators. Each example is TypeScript and pastes into any Next.js or Vite project unchanged.
What the item component offers
- Flexible media slot: ItemMedia accepts an icon, avatar, or image and keeps it vertically centered against the text block.
- Title and description pairing: ItemTitle and ItemDescription handle truncation and muted styling without extra classes.
- Leading and trailing actions: ItemActions aligns buttons, switches, or chevrons at the row end for interactive lists.
- Variants for context: Default, outline, and muted variants let the same row work in cards, menus, and plain lists.
- asChild link rendering: An item can render as an anchor so whole rows become navigable targets.
Best practices
- One primary action per row: Keep a single obvious action in ItemActions and move secondary commands into a dropdown.
- Truncate long descriptions: Clamp description text to one or two lines so mixed-length content keeps rows equal height.
- Make the whole row clickable when navigating: If the row leads somewhere, render it as a link instead of relying on a small chevron target.
- Use ItemGroup for lists: Wrap related rows in a group with separators rather than stacking bordered items with margins.
- Keep media sizes consistent: Mixing icon and avatar sizes within one list breaks vertical rhythm, so standardize per list.
Common use cases
Notification centers, member lists, and file browsers all reduce to the same row anatomy. A team list pairs an avatar with a name, role description, and an invite action, while an integrations page uses an icon, the service name, and a switch to enable it. Settings screens reuse the pattern for navigable rows ending in a chevron.
The item also works as a compact summary inside a card, for example a payment method row with a brand icon and an edit action. When a list has no content yet, pairing the layout with the empty component keeps the page structure intact.
How it fits with neighboring components
Rows frequently end in a dropdown menu for secondary actions or a badge for status, and an ItemGroup with a separator between rows produces clean stacked lists. For long feeds, wrapping the group in a scroll area keeps the page height fixed.
Under the hood
There is no primitive behind the item. It is plain accessible markup, a flex container styled with Tailwind CSS as documented in the shadcn/ui item docs, which means these item examples behave identically in Radix UI and Base UI based projects. With zero JavaScript behavior, items render fine in React Server Components and cost nothing at runtime.