Item

A flexible container for displaying content in a scannable row.

Title

Description

Upload successful

Item Examples

Installation

pnpm dlx stera-ui@latest add item

Composition

Compose Item using only the components you need, nested according to this hierarchy:

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

All Variants

Ghost variant

No border, transparent background.

Outline variant (Default)

Visible border, transparent background.

Subtle variant

Subtle muted background, no border.

All Variants

Variant	Description
`outline`	Visible border, transparent background (default)
`subtle`	Subtle muted background, no border
`ghost`	No border, transparent background

All Sizes

Large size

Increased padding and spacing.

Medium size (Default)

Standard padding and spacing.

Small size

Reduced padding and spacing.

All Sizes

Size	Description
`sm`	Reduced padding and spacing
`md`	Standard padding and spacing (default)
`lg`	Increased padding and spacing

Examples

Icon

Use ItemMedia with variant="icon" to display an icon.

Security Alert

New login detected from unknown device.

Icon

Avatar

Display an Avatar within ItemMedia.

@hauntedjpeg

Last active 2 min ago

@hauntedjpeg

Last active 2 min ago

Avatar

Header

Use ItemHeader to add a header above the item content.

Dev ServerRunning

http://localhost:3000

http://192.168.86.24:3000

Header

Footer

Use ItemFooter to add a footer below the item content.

http://localhost:3000

http://192.168.86.24:3000

Dev ServerRunning

Footer

API Reference

Item

Prop	Type	Default
`variant`	`"outline" \| "subtle" \| "ghost"`	`"outline"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`render`	`ReactElement`	—

ItemMedia

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

Subcomponents

Component	Description
`ItemBody`	Flex row wrapper for media, content, and actions inside an `Item`
`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