Item

Display content with media, title, description, and actions.

Jane Cooper

jane@swiss-ui.dev

Installation

Add the item component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/item.json

Usage

tsx

import { Item } from "@/components/ui/item"

Examples

Variants

default / outline / muted

default

Item variant default.

outline

Item variant outline.

muted

Item variant muted.

import { BellIcon } from "lucide-react"

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

<div className="flex w-80 flex-col gap-2">
  <Item variant="default">
    <ItemMedia variant="icon"><BellIcon /></ItemMedia>
    <ItemContent>
      <ItemTitle>Default</ItemTitle>
      <ItemDescription>Item variant default.</ItemDescription>
    </ItemContent>
  </Item>
  {/* outline, muted ... */}
</div>

Item Group

ItemGroup + ItemSeparator

Inbox

Drafts

import { ChevronRightIcon } from "lucide-react"

import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item"

<ItemGroup className="w-80 border border-border">
  <Item>
    <ItemContent><ItemTitle>Inbox</ItemTitle></ItemContent>
    <ItemActions><ChevronRightIcon className="size-4 text-muted-foreground" /></ItemActions>
  </Item>
  <ItemSeparator />
  <Item>
    <ItemContent><ItemTitle>Drafts</ItemTitle></ItemContent>
    <ItemActions><ChevronRightIcon className="size-4 text-muted-foreground" /></ItemActions>
  </Item>
</ItemGroup>

With header

ItemHeader spans the row

ProjectActive

Swiss UI

A component registry.

import { LayoutDashboardIcon } from "lucide-react"

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

<Item variant="outline" className="w-80">
  <ItemHeader>
    <span className="label text-muted-foreground">Project</span>
    <span className="label text-signal">Active</span>
  </ItemHeader>
  <ItemMedia variant="icon"><LayoutDashboardIcon /></ItemMedia>
  <ItemContent>
    <ItemTitle>Swiss UI</ItemTitle>
    <ItemDescription>A component registry.</ItemDescription>
  </ItemContent>
</Item>