Shadcn Item Components

Shadcn Item Component

The Shadcn Item is a flexible row layout for displaying one piece of content: a media slot on the left, a title and description in the middle and actions on the right. It is the building block behind user lists, notification rows, file lists, playlists and settings entries, and it keeps all of them aligned with the same spacing. If you need a shadcn/ui list row that works for both static content and links, the item component is the place to start.

Here the item shows up as a playlist with cover images, a people list with invite buttons, rows rendered as links and compact entries inside a dropdown menu. The shadcn/ui item is plain, stateless markup built with React and Tailwind CSS; the only primitive it touches is the Slot utility from Radix UI, used by the asChild option to render your own link or button.

What is the Shadcn Item Component?

An item is a horizontal flex container with named slots. ItemMedia holds an icon, an avatar or an image, ItemContent stacks the title and description, and ItemActions aligns buttons or indicators at the end. Items come in three styles and three sizes, and ItemGroup stacks them into a list with consistent gaps. With asChild, the whole row becomes a link.

Use an item for a row in a list, where each entry shares the same shape. For a standalone block with a header, body and footer, a Card is a better fit, and for tabular data with sortable columns, use a Table. When the content is a message that needs attention, use an Alert.

Anatomy of the Shadcn Item

10 Shadcn Item Variants

Each item variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: An outlined item with a title, a description and an action button.
• Style variants and icon: The default, outline and muted styles with an icon, plus a single security alert row.
• With avatar: A person with an avatar, last seen status and a round invite button.
• Avatar group: Overlapping grayscale avatars with a No Team Members message and an Invite button.
• Lists with ItemGroup: A playlist of linked rows with cover images and durations, and a people list with add buttons.
• With header image: Two items in a grid, each with a cover image in ItemHeader above the title.
• As a link: Rows rendered as internal and external links with a chevron or an external link icon.
• In a dropdown: Extra small items with avatars and emails inside a Dropdown Menu for account or user selection.

How to Install the Shadcn Item Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a item variant by its name:

npx shadcn@latest add @shadcnuikit/item1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Item Component

Import the parts from components/ui/item, place media, content and actions inside Item, and wrap several items in an ItemGroup to build a list.

import { PlusIcon } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

export function TeamList() {
  return (
    <ItemGroup>
      <Item variant="outline" role="listitem">
        <ItemMedia>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>shadcn</ItemTitle>
          <ItemDescription>shadcn@vercel.com</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            <PlusIcon /> Invite
          </Button>
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

Why Use the Shadcn Item Component

• Consistent rows: Media, text and actions line up the same way in every list across your app.
• Three styles and sizes: Switch between default, outline and muted, and scale down to xs for menus and dense lists.
• Links without extra markup: asChild turns the whole row into an anchor or button while keeping the layout and focus ring; linked rows also get a hover background.
• Smart text handling: Titles clamp to one line and descriptions to two, so long content never breaks the layout.
• Composable: Drop in any avatar, image, badge or button, and use the item inside menus, cards and popovers.

Common Item Use Cases

• User and team lists: Members with avatars, emails and invite or remove actions.
• Notifications and activity: Alerts and events with an icon, a message and a timestamp.
• Media lists: Playlists, file lists and galleries with thumbnails.
• Settings rows: A label and description with a switch or button at the end.
• Navigation links: Linked rows for docs, resources and help center pages.
• Menu entries: Rich options with avatars inside dropdown menus and account switchers.

Customizing the Shadcn Item

Every part accepts a className, merged with cn(). Target styles through the data-variant and data-size attributes, add hover states to linked items, or remove the wrapping with flex-nowrap when the row sits in a narrow menu. Colors and borders come from theme variables, so a palette from the free Theme Generator restyles every item at once.

<Item variant="outline" asChild>
  <a href="/docs">
    <ItemContent>
      <ItemTitle>Visit our documentation</ItemTitle>
      <ItemDescription>Learn how to get started.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <ChevronRightIcon className="size-4" />
    </ItemActions>
  </a>
</Item>

Item Accessibility

ItemGroup has role="list", so give each child Item a role="listitem" to keep the list semantics complete, as in the playlist example. When an item is clickable, render it as a real a or button with asChild instead of adding click handlers to a div. It then gets keyboard focus with Tab, activates with Enter and shows the built-in focus ring.

Icon-only action buttons need an aria-label, as in the avatar example, and decorative icons in ItemMedia can stay hidden from screen readers.

Item Best Practices

• Keep titles short; they are clamped to one line and should identify the row at a glance.
• Use the same variant and size for every item in a list.
• Limit actions to one or two per row, and move the rest into a Dropdown Menu.
• Make the whole row a link with asChild rather than nesting a link inside the title.
• Use the xs size inside menus and popovers, and the default size for page level lists.
• For a larger standalone block with a header and footer, use a Card instead.

Components Related to Item

Shadcn Item FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.