Shadcn Item

Browse 12 production-ready shadcn item components for list rows, user profiles, content cards, and selectable lists. Shadcn Item is compatible with Radix UI and Base UI primitives and is fully aligned with Shadcn Create style options so your previews match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Rows of people, files, services or events, each an avatar or icon beside text, a badge or a button
Clickable menus of account pages, mailbox folders or commands, ending in a chevron, count or key
A compact record card with a header and footer, such as a project with status, team and progress

When not to use

A finished dashboard panel of KPIs, transactions or integrations with data on every row: use the List blocks
A whole page of account options in labeled rows, each with its own switch, select or input: use the Settings blocks
Rows the user reorders by dragging them up or down the page: use the Sortable component

Agent notes

Make a row a link through render on the base twin or asChild on radix; every style draws the hover fill only when the row is an anchor
ItemGroup sets role list but Item sets no listitem role, so wrap each row in an element that carries it
ItemTitle clamps to 1 line and ItemDescription to 2, so longer text is cut off until a className lifts the clamp

Markdownhttps://web.dev.reui.io/components/item.md

MCPget_component("item")

Installnpx shadcn@latest add item

Full index for agents:llms.txtReUI MCP setup

Shadcn Item: Flexible List Rows and Cards

Shadcn Item is a flex container for rows, cards, and content blocks that combines media (avatars, icons), title, description, and optional actions. It aligns with Radix UI and Base UI primitives for composition, and is fully compatible with Shadcn Create style options.

It displays consistent, scannable list rows across dashboards, user mentions, search results, and content feeds without requiring custom grid logic.

ReUI lists item components in dashboards, selectable lists, and user mention flows so you evaluate media sizing, action placement, and density next to a Shadcn Data Grid or Shadcn Table. The sections below cover what it is, why teams use it, and integration components.

What is Shadcn Item?

In UI terms, an item is a row or card that displays structured content. Shadcn Item provides sub-components for media, title, description, and actions so layout stays consistent without manual grid alignment.

Components here show user list rows with avatars, search results with icons and metadata, and selectable items with checkboxes or radio buttons. They help you decide item height, action visibility, and hover states before using the same component across dashboards and feeds.

Why Use Shadcn Item?

Items speed up list building by providing a ready-made row structure. Instead of writing grid or flex boilerplate for each media-title-description combination, you use ItemMedia, ItemContent, ItemTitle, and add actions as needed.

The layouts on this page show items inside Shadcn Data Grid, Shadcn Sortable lists, and selectable Shadcn Checkbox flows.

Shadcn Item Features

Media Slot. ItemMedia renders avatars, icons, or images so visual context is consistently sized and aligned.
Title and Description. ItemContent, ItemTitle, and description text together create scannable rows with clear hierarchy.
Actions Support. Optional trailing buttons or menus for delete, edit, or detail actions without breaking the row structure.
Selectable Variants. Pair with Shadcn Checkbox or Shadcn Radio Group so list items become interactive without custom state logic.
Size and Variant Control. Adjust height and visual style (transparent, outlined, muted) to match your density and hierarchy needs.

Use items inside a Shadcn Data Grid or custom list wrapper for rows. Pair with Shadcn Checkbox or Shadcn Radio Group for selection. Add Shadcn Dropdown Menu as a trailing action for edit, delete, or detail links.

Combine items with Shadcn Avatar for user rows and Shadcn Badge for status labels. Use Shadcn Sortable to make item lists drag-and-drop reorderable.

Render items inside a Shadcn Card section or Shadcn Scroll Area for bounded lists. Add Shadcn Input search above the list to filter items in real-time.

List Blocks in ReUI Pro

The free examples above pair with 11 production ready list blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

List (11 blocks)List layouts for contacts, records, activity rows, grouped collections, and compact action surfaces.

Browse all Application blocks

Frequently Asked Questions

What is a Shadcn Item used for in real products?

User list rows, search results, mention dropdowns, file lists, and notification feeds. Anywhere you need a consistent media-title-description row layout, an item is faster than writing grid boilerplate.

How do I make items selectable with checkboxes?

Render a Shadcn Checkbox inside the item or as a leading element. Manage checkbox state in a parent component and wire onChange to your selection logic. This component works well inside Shadcn Data Grid or custom list wrappers.

Can I use items as links to detail pages?

Yes. Use the asChild prop and wrap the item with a Link component from Next.js or React Router. Focus and hover states will apply to the anchor element so the entire row feels clickable.

How do I control item height and spacing?

Use the size prop (sm, default, lg) to adjust padding and internal spacing. For custom heights, modify the underlying Tailwind classes. Keep items aligned with your spacing scale so they nest cleanly inside Shadcn Card or page sections.

Is Shadcn Item accessible for keyboard and screen reader users?

The component uses semantic HTML (divs with proper roles when needed). Pair with Shadcn Checkbox or native button/link semantics for interaction. Test focus order and announce actions clearly so screen readers understand list structure and available commands.

Are ReUI item components different from a single item example?

Yes. ReUI shows items inside dashboards, searchable lists, and sortable groups. You see item density, action menus, and integration with Shadcn Data Grid, Shadcn Sortable, and Shadcn Button groups together.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.