Item

A row of a list: an icon or picture, a title and description, and actions at the end.

@cupertinoui/itemRegistry JSON

Wi‑Fi

Connected to Appleseed Home

Location Services, FileVault and app permissions.

import { ChevronRightIcon, ShieldCheckIcon, WifiIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { IconTile } from "@/components/ui/icon-tile"
import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/ui/item"

export default function ItemDemo() {
  return (
    <ItemGroup className="w-full max-w-md">
      <Item variant="outline">
        <ItemMedia>
          <IconTile color="blue" size="lg">
            <WifiIcon />
          </IconTile>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Wi‑Fi</ItemTitle>
          <ItemDescription>Connected to Appleseed Home</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="secondary" size="sm">Details…</Button>
        </ItemActions>
      </Item>
      <Item variant="muted" render={<a href="#" />}>
        <ItemMedia variant="icon">
          <ShieldCheckIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Privacy & Security</ItemTitle>
          <ItemDescription>Location Services, FileVault and app permissions.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <ChevronRightIcon className="size-4 text-mac-label-tertiary" />
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/item

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item"

<Item variant="outline">
  <ItemMedia variant="icon"><WifiIcon /></ItemMedia>
  <ItemContent>
    <ItemTitle>Wi‑Fi</ItemTitle>
    <ItemDescription>Connected</ItemDescription>
  </ItemContent>
</Item>

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

Item

Prop	Type	Description
`variant`	`"default" \| "outline" \| "muted"` Default: `"default"`	Plain, outlined or filled.
`size`	`"default" \| "sm" \| "xs"` Default: `"default"`	The padding.
`render`	`ReactElement`	Render a link with the item's styles.
`className`	`string`	Extra classes, merged with the component's own.

ItemMedia

Prop	Type	Description
`variant`	`"default" \| "icon" \| "image"` Default: `"default"`	How the media is framed.
`className`	`string`	Extra classes, merged with the component's own.