saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Item

Item

A list item component with leading/trailing elements.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/item

Usage

import { Item } from "@/components/ui/item"
<Item
  leading={<Avatar />}
  title="Item Title"
  description="Item description"
  trailing={<Badge>New</Badge>}
/>

Examples

Variants

Loading...
Style variants.

Sizes

Loading...
Compact and standard sizes.

With Icon

Loading...
Item with icon.

With Avatar

Loading...
Item with avatar.

With Image

Loading...
Item with image media.

Item Group

Loading...
Grouped items with separators.

As Link

Loading...
Item as clickable link.

With Dropdown

Loading...
Item with dropdown menu.

API Reference

PropTypeDefaultDescription
leadingReact.ReactNode—Content at the start.
titlestring—Item title.
descriptionstring—Item description.
trailingReact.ReactNode—Content at the end.

On This Page

  • Installation
  • Usage
  • Examples
  • Variants
  • Sizes
  • With Icon
  • With Avatar
  • With Image
  • Item Group
  • As Link
  • With Dropdown
  • API Reference
Project DocumentationNew

Complete guide for the project setup and configuration

API Reference

Detailed API documentation with examples

Quick Notes

Standard

Default Variant

A standard item with a transparent background.

Outlined

Outline Variant

An item with a visible border outline.

Subdued

Muted Variant

An item with a muted background for less emphasis.

Compact (small)

Compact Item

Standard (default)

Standard Item

Default size with more padding and spacing.

Security AlertCritical

Unusual sign-in activity detected on your account. Please review your recent login history immediately.

SC
Sarah Chen invited you

You've been invited to join the Design Systems team workspace.

Abstract art
Abstract Composition

A colorful abstract digital artwork featuring geometric shapes and gradients.

Email Notifications

Receive updates directly in your inbox.

In-App Messages

Get notified within the application.

Push Notifications

Receive push alerts on your device.

Documentation

Read the full component documentation and API reference.

Changelog

View the latest changes and release notes.

Quarterly Report

Financial summary for Q4 2025. Last updated 2 days ago.