Item

Jane Appleseed

Product designer · San Francisco

Installation

pnpm dlx stera-ui add item

Usage

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

<Item>
  <ItemMedia variant="icon">
    <SiUser />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Jane Appleseed</ItemTitle>
    <ItemDescription>Product designer · San Francisco</ItemDescription>
  </ItemContent>
</Item>

All Variants

Default variant

No border, transparent background.

Outline variant

Visible border, transparent background.

Muted variant

Subtle muted background, no border.

Variant	Description
`default`	No border, transparent background
`outline`	Visible border, transparent background
`muted`	Subtle muted background, no border

All Sizes

Default size

Standard padding and spacing.

Small size

Reduced padding and spacing.

Extra small size

Compact padding and spacing.

Size	Description
`default`	Standard padding and spacing
`sm`	Reduced padding and spacing
`xs`	Compact padding and spacing

With Actions

Notifications

You have new activity.

Team member request

Notification List

Deployment successful

Production build v2.4.1 deployed without errors.

Done

3 new mentions

You were mentioned in the #design channel.

Team invite accepted

Jordan joined the workspace.

API Reference

Prop	Type	Default
`variant`	`"default" \| "outline" \| "muted"`	`"default"`
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`render`	`ReactElement`	—

ItemMedia

Prop	Type	Default
`variant`	`"default" \| "icon" \| "image"`	`"default"`

Subcomponents

Component	Description
`ItemContent`	Flex column container for title and description
`ItemTitle`	Primary label text
`ItemDescription`	Secondary supporting text
`ItemActions`	Right-aligned slot for badges, buttons, or controls
`ItemGroup`	Wrapper for a list of items
`ItemSeparator`	Horizontal divider between items
`ItemHeader`	Optional header row for a group
`ItemFooter`	Optional footer row for a group