Item

import { ShieldCheckIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

export default function ItemDemo() {
  return (
    <div className="w-96">
      <Item variant="outline">
        <ItemMedia variant="icon">
          <ShieldCheckIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Two-factor authentication</ItemTitle>
          <ItemDescription>
            Add an extra layer of security to your account.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Enable
          </Button>
        </ItemActions>
      </Item>
    </div>
  )
}

Item is a row container. Inside it, ItemMedia holds an icon, image or avatar, ItemContent stacks an ItemTitle and ItemDescription, and ItemActions holds buttons or indicators at the end. ItemHeader and ItemFooter span the full width of the item, above and below the main row. The whole item can also render as a link or button.

ItemGroup stacks items as a list, and its inset variant groups them into a rounded list on bg-muted, like iOS Settings. Place an ItemSeparator between items to divide them. Use items to display content; for form controls with labels and validation, use Field.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/item

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add item

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react class-variance-authority

2. Copy the source into components/ui/item.tsx:

3. Update the import paths to match your project.

Usage

import { ItemGroup, ItemSeparator, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter } 

<div

ItemGroup has the list role, so set role="listitem" on each Item inside it. Choose a variant for the item's border and background, and a size for its padding. Items inside a group with sm or xs items are spaced more tightly.

When ItemDescription is present, the media aligns to the top of the item instead of its center. The title is limited to one line and the description to two.

Examples

Variants

The default, outline and muted item variants.

Sizes

The default, sm and xs item sizes.

As link

An item rendered as a link, so the whole row is one focusable target.

With image

A list of people with image media, separators and an invite button on each row.

Inset

The same list in an inset item group, forming a rounded list with inset separators.

With avatar

An item with an Avatar as media and a Message button.

With header and footer

A plan summary with a price in the header and a renewal date and action in the footer.

API Reference

Accessibility

• ItemGroup has the list role; give each Item in it the listitem role.
• ItemSeparator has the none role, so it is ignored by assistive technology.
• An item rendered as a link or button is a single focusable element and shows a focus ring.
• Give icon-only action buttons an accessible name with aria-label.

Notes

• Styling hooks: data-slot values item-group, item-separator, item, item-media, item-content, item-title, item-description, item-actions, item-header and item-footer.
• Item sets data-variant and data-size; ItemGroup and ItemMedia set data-variant.
• An item rendered as an anchor gets the accent background on hover.
• Uses the border, muted, accent, muted-foreground and primary colors.

Item is a row that renders as a Pressable with the button role when it has onPress or onLongPress, and as a plain View with the listitem role otherwise. It has three variants (default, outline, muted) and three sizes (default, sm, xs).

ItemGroup stacks items as a list. Its inset variant joins them into one rounded card with square inner corners, which suits settings screens; add ItemSeparator between rows to draw an inset divider.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/item

$ pnpm dlx @esuiss/ui@latest add item

$ pnpm dlx @esuiss/ui@latest add item --platform swift