Item

Lays out a reusable list item with media, content, and actions.

Title Only

Title + Button

Title + Description

This is a description that provides additional context.

Title + Description + Button

This item includes a title, description, and action button.

Media + Title

Media + Title + Button

Media + Title + Description

This item includes media, title, and description.

Media + Title + Description + Button

Complete item with all components: media, title, description, and button.

Multiple Actions

Item with multiple action buttons in the actions area.

Installation

Install Item from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/item

Usage

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
} from "@/components/ui/item"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Item	Represents one option or repeated child.
ItemMedia	A composable part of the component anatomy.
ItemContent	Contains the primary visible content.
ItemActions	A composable part of the component anatomy.
ItemGroup	Groups related items into one logical set.
ItemSeparator	Visually and semantically separates related groups.
ItemTitle	Provides the visible heading for the current region.
ItemDescription	Provides supporting context for the current region.
ItemHeader	Groups heading and introductory content.
ItemFooter	Groups supporting actions or metadata.

API Reference

Item exports 10 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Item Component
ItemMedia Component
ItemContent Component
ItemActions Component
ItemGroup Component
ItemSeparator Component
ItemTitle Component
ItemDescription Component
ItemHeader Component
ItemFooter Component

Accessibility

Item adds no application-specific accessible name by itself; use semantic content and label any interactive descendants.
Do not communicate state or meaning through color alone, and verify the composed result at text zoom and with keyboard navigation.

Source

Item uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Input OTP Kbd