Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Item

Copy Markdown

A versatile component for displaying content.

PreviewCode

Basic Item

A simple item with title and description.

Your profile has been verified.

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/item

Anatomy#

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

Usage#

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

<Item>
  <ItemMedia />
  <ItemContent>
    <ItemTitle />
    <ItemDescription />
  </ItemContent>
  <ItemActions />
</Item>

Variant#

Default#

PreviewCode

Default Variant

Transparent background with no border.

Outline#

PreviewCode

Outline Variant

Outlined style with a visible border.

Muted#

PreviewCode

Muted Variant

Muted background for secondary content.

Custom spacing#

The [--space:--spacing("value")] on ItemContent controls the internal spacing.

Default spacing is --spacing(3).

PreviewCode

Compact spacing

Uses [--space:--spacing(2)] for tighter padding and gap.

Responsive spacing

Wider from md up with md:[--space:--spacing(5)].

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

Examples#

Icon#

PreviewCode

Security Alert

New login detected from unknown device.

Review

Avatar#

PreviewCode

PV

Pasquale Vitiello

Last seen 5 months ago

View

Image#

PreviewCode

Midnight City Lights

Electric Nights · Neon Dreams · 3:45

Coffee Shop Conversations

Urban Stories · The Morning Brew · 4:05

Digital Rain

Binary Beats · Cyber Symphony · 3:30

Group#

Use ItemGroup to group related items together.

PreviewCode

v

vinihvc

[email protected]

s

segunadebayo

[email protected]

p

pasqualevitiello

[email protected]

Header#

Use ItemHeader to add a header above the item content.

PreviewCode

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

Link#

Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.

PreviewCode

[

Visit our documentation

Learn how to get started with our components.

](/docs)[

External resource

Opens in a new tab with security attributes.

](https://vini.one/twitter)

Dropdown#

Use Item inside a menu or dropdown to display rich content in menu items.

PreviewCode

Open

API Reference#

Item#

Layout for list items with media, title, description, and actions. Use [--space:--spacing("value")] via className to control padding and gap. Supports asChild.

ItemGroup#

Groups related items with consistent spacing. Uses a fixed gap; adjust layout with className if needed. Has role="list" for accessibility.

ItemSeparator#

Horizontal divider between items in a group.

ItemMedia#

Avatar, icon, or image for the item. Supports icon and image variants.

ItemContent#

Wraps the item title and description text.

ItemTitle#

Primary title or heading for the item.

ItemDescription#

Secondary description or subtitle for the item.

ItemActions#

Holds action buttons or controls.

ItemHeader#

Full-width header row above the item content.

ItemFooter#

Full-width footer row below the item content.

[

Previous page

Input ](/docs/components/input)[

Next page

Kbd ](/docs/components/kbd)

On This Page

InstallationAnatomyUsageVariantDefaultOutlineMutedCustom spacingExamplesIconAvatarImageGroupHeaderLinkDropdownAPI ReferenceItemItemGroupItemSeparatorItemMediaItemContentItemTitleItemDescriptionItemActionsItemHeaderItemFooter