saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Item

Item

A list item component with leading/trailing elements.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/item.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

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.
PreviousInputNextKanban

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.