Item

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/item

Anatomy#

ItemGroup
├── ItemSeparator
└── Item
    ├── ItemMedia
    ├── ItemHeader
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Usage#

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

<Item>
  <ItemMedia />
  <ItemContent>
    <ItemTitle />
    <ItemDescription />
  </ItemContent>
  <ItemActions />
</Item>

Variant#

Default#

Outline#

Muted#

Custom spacing#

The [--space:--spacing("value")] on ItemContent controls the internal spacing.

Default spacing is --spacing(3).

You can use breakpoint utilities to change the internal spacing at different screen sizes.

  md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

Examples#

Icon#

Avatar#

PreviewCode

PV

Pasquale Vitiello

Last seen 5 months ago

View

Image#

PreviewCode

Midnight City Lights

Electric Nights · Neon Dreams · 3:45

Coffee Shop Conversations

Urban Stories · The Morning Brew · 4:05

Digital Rain

Binary Beats · Cyber Symphony · 3:30

Group#

Use ItemGroup to group related items together.

PreviewCode

v

vinihvc

vinihvc@example.com

s

segunadebayo

segunadebayo@example.com

p

pasqualevitiello

pasqualevitiello@example.com

Header#

Use ItemHeader to add a header above the item content.

PreviewCode

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

Link#

Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.

Dropdown#

Use Item inside a menu or dropdown to display rich content in menu items.

API Reference#

Item#

Layout for list items with media, title, description, and actions. Use [--space:--spacing("value")] via className to control padding and gap. Supports asChild.

ItemGroup#

Groups related items with consistent spacing. Uses a fixed gap; adjust layout with className if needed. Has role="list" for accessibility.

ItemSeparator#

Horizontal divider between items in a group.

ItemMedia#

Avatar, icon, or image for the item. Supports icon and image variants.

ItemContent#

Wraps the item title and description text.

ItemTitle#

Primary title or heading for the item.

ItemDescription#

Secondary description or subtitle for the item.

ItemActions#

Holds action buttons or controls.

ItemHeader#

Full-width header row above the item content.

ItemFooter#

Full-width footer row below the item content.