Q: How do I make item rows interactive (whole-row click)?

Use the interactive variant. Wrap the Item in ` ` or ` ` with `block w-full text-left` so the row becomes a single tap target. Add `hover:bg-muted/50` and `transition-colors` for the affordance. For nested actions inside a clickable row (a kebab menu on the right), use `e.stopPropagation()` on the inner button so its click doesn't bubble up to the row.

Question 1

What is a shadcn item?

Accepted Answer

A shadcn item is the generic horizontal row primitive — Icon (or media) on the left, Title + optional Description in the middle, optional metadata or action on the right. It's the building block for settings lists, menu rows, file lists, member lists, navigation entries, and any "row of related content" surface. The shadcn Item primitive standardizes spacing, alignment, hover states, and clickable behavior across these patterns.

Question 2

Are these item examples free?

Accepted Answer

Yes, every item example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

How is Item different from Card?

Accepted Answer

Item is a HORIZONTAL row optimized for lists — content reads left-to-right, multiple items stack vertically. Card is a SELF-CONTAINED unit — content is structured top-to-bottom with header/body/footer slots, and cards typically sit in grids. Pick by direction: list of related rows → Item; grid of self-contained units → Card.

Question 4

When should I use Item versus rendering rows manually?

Accepted Answer

For one-off rows in non-list contexts, manual flexbox is fine. For ANY list with 5+ rows, use Item — the consistent spacing, alignment, hover treatment, and click target sizing pays for itself by the third row. The visual rhythm of a list with mixed Item / non-Item rows reads as broken alignment.

Question 5

Which item variant fits a settings list?

Accepted Answer

Use the standard variant. Each row: leading Icon, Title (current setting name), optional Description (one-line explanation), trailing control (Switch, Select, ChevronRight). Stack rows with `divide-y` for clean separators. Click target spans the full row so users can tap anywhere — particularly important on mobile where small switches are hard to hit.

Question 6

How do I build a media list (avatar + name + secondary text + action)?

Accepted Answer

Use the media variant. Avatar on the left, two-line stack in the middle (display name + handle / email / role), action button(s) on the right. Common in member lists, conversation lists, contact pickers. For dense lists (50+ rows), drop avatar size from `size-10` to `size-8` to fit more rows on screen.

Question 7

How do I make item rows interactive (whole-row click)?

Accepted Answer

Use the interactive variant. Wrap the Item in `` or `

Question 8

How do I install an item example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/item/…`, plus the shadcn/ui Item primitive (and Avatar, Switch, etc., depending on the example).

Question 9

How do I make item rows responsive (collapse on mobile)?

Accepted Answer

Two patterns. (1) Hide non-essential metadata at narrow widths via `hidden md:block` on the secondary text — keep title + leading icon visible at all widths. (2) Stack the row vertically on mobile via `flex-col sm:flex-row` so the action ends up below the title instead of off-screen. Pick by which information is critical and which is supplementary.

Question 10

How do I add a hover-revealed action to item rows?

Accepted Answer

Make the action `opacity-0 group-hover:opacity-100` and add `group` to the parent Item. The action button stays in DOM (so layout doesn't shift on hover) but is invisible until hover. Pattern used by GitHub for inline edit/delete on file rows. On touch (no hover), keep the action always visible — wrap with `md:opacity-0` so the hide-on-hover only applies on hover-capable devices.

Question 11

Which libraries do item examples depend on?

Accepted Answer

shadcn/ui Item (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons). Composite examples add Avatar, Switch, Badge, Button — single shadcn primitives away. React 19 baseline.

Question 12

Are item examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Interactive items render as real `

Question 13

Can I use these item examples with React Server Components?

Accepted Answer

Static items render cleanly as Server Components — useful for read-only lists fetched server-side. Interactive items (hover-revealed actions, click handlers, animations) need a client boundary. Hybrid pattern: render the list on the server with static Items, lift only the per-row interactive bits into small client wrappers.

React Item Examples for shadcn/ui

Browse every item example

Frequently Asked Questions