Item

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/item.json

Usage

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

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

Variant

Use the variant prop to change the visual style of the item.

Default

Outline

Muted

Custom spacing

The [--space:--spacing("value")] utility class controls the item padding and gap.

Breakpoint utilities change the spacing at different screen sizes.

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

Examples

Icon

Use <ItemMedia /> with variant="icon" to display an icon.

Avatar

<ItemMedia /> with variant="default" displays an avatar.

PreviewCode

PV

Pasquale Vitiello

Last seen 5 months ago

View

Image

Use <ItemMedia /> with variant="image" to display an 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 (e.g. menu, buttons).

ItemHeader

Full-width header row above the item content.

ItemFooter

Full-width footer row below the item content.