Question 1

What is an item?

Accepted Answer

A row of related content: media at the start, a title and a description in the middle, actions at the end. It's the building block for settings rows, people lists, file and song lists, notices and menu entries. Each example here is shadcn.io's Item and its parts (ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemGroup, ItemSeparator), styled with Tailwind CSS, for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid on Ark UI.

Question 2

Are these item examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

How is Item different from Card?

Accepted Answer

An Item is a row: content reads across, and rows stack into a list. A Card is a self-contained block with a header, a body and a footer, usually in a grid. When an Item needs a picture on top, ItemHeader does it, as the Item with Header example shows.

Question 4

When should I use Item instead of a plain flex row?

Accepted Answer

Whenever rows repeat. Item keeps the spacing, alignment, hover and focus styles the same from row to row, and ItemGroup with ItemSeparator turns the rows into a list that screen readers announce as one.

Question 5

Which variants and sizes are there?

Accepted Answer

Item has a `variant`: `default` (no border), `outline` and `muted`. It has a `size`: `default`, `sm` and `xs`. The examples mostly use `outline` with a `bg-background` class so the border reads on any surface.

Question 6

How do I add an avatar, an icon or an image?

Accepted Answer

Put it in ItemMedia: an Avatar as is, an icon with `variant="icon"`, which sizes it, or a picture with `variant="image"`, which crops it to a rounded square.

Question 7

How do I make the whole row clickable?

Accepted Answer

Render the Item as a link, so the whole row is one target with a hover background and a focus ring: `asChild` with an anchor child on Ark UI, Radix UI and Vue, `render` on Base UI, and `href` on React Aria. Svelte and Solid pass the anchor through `asChild` as a snippet or a function.

Question 8

How do I install an item example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the components it uses, Item and any Avatar, Button or Dropdown Menu, to your project, for your framework and UI library.

Question 9

How do I build a list of items?

Accepted Answer

Wrap them in ItemGroup, which is a list, and put an ItemSeparator between rows, but not after the last one, as the Item Group example does.

Question 10

Can I use an item inside a menu?

Accepted Answer

Put the Item inside the menu item, remove the menu item's padding and let the Item bring its own, as the Item in Dropdown example does. The row keeps its avatar, title and description, and the menu still handles focus and selection.

Question 11

Which libraries do item examples use?

Accepted Answer

shadcn.io's Item, with Avatar, Button and Dropdown Menu where an example needs them (built on Base UI, React Aria, Ark UI or Radix UI in React, and on Ark UI in Vue, Svelte and Solid), Tailwind CSS and Lucide icons.

Question 12

Are the items accessible?

Accepted Answer

Yes. A row rendered as a link is a real anchor with a focus ring, ItemGroup is announced as a list, decorative icons are hidden with `aria-hidden`, and icon-only buttons have an `aria-label`.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes, the rows look the same on every target. Only the way a row becomes a link and the menu's props differ between libraries.

Item Examples

Item as Link

Item in Dropdown

Item Group

Item Sizes

Item with Header

Item with Avatar

Item with Icon Media

Item with Image Media

Basic Item

Item with Media and Icon

More component examples

Kbd

Table

Avatar

Badge

Carousel

Chart

Data Table

Label

Item examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every item example. One prompt away.