Item

A versatile component that you can use to display any content.

Basic Item

A simple item with title and description.

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

Installation


pnpm dlx shadcn@latest add @shark-ui/item

Usage


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


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

Item vs Field

Use <Field /> if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use <Item />.

Variant

Use the variant prop to change the visual style of the item.

Outline

Outline Variant

Outlined style with a visible border.

Muted

Muted Variant

Muted background for secondary content.

Size

Use the size prop to change the size of the item.

Extra Small Size

Small Size

A compact size for dense layouts.

Small Size

A compact size for dense layouts.

Examples

Icon

Use <ItemMedia /> with variant="icon" to display an icon.

Security Alert

New login detected from unknown device.

Avatar

You can use <ItemMedia /> with variant="default" to display an avatar.

Pasquale Vitiello

Last seen 5 months ago

No Team Members

Invite your team to collaborate on this project.

Image

Use <ItemMedia /> with variant="image" to display an image.

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.

vinihvc

vinihvc@example.com

segunadebayo

segunadebayo@example.com

pasqualevitiello

pasqualevitiello@example.com

Header

Use <ItemHeader /> to add a header above the item content.

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.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

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

API Reference

Item

Main component for displaying content with media, title, description, and actions. Renders a div (or the child element when asChild is true).

Prop	Type	Default
`variant`	`default`, `outline`, `muted`	`default`
`size`	`xs`, `sm`, `md`	`md`
`asChild`	`boolean`	`false`
`className`	`string`	-

ItemGroup

Container that groups related items with consistent spacing. Renders a div with role="list".

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemSeparator

Separator between items in a group. Renders a horizontal separator.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemMedia

Displays media (icon, image, or custom content) for the item. Renders a div.

Prop	Type	Default
`variant`	`default`, `icon`, `image`	`default`
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemContent

Wraps the title and description of the item. Renders a div.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemTitle

Displays the item title. Renders a div.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemDescription

Displays the item description. Renders a p.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemActions

Container for action buttons or other controls. Renders a div.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemHeader

Header above the item content (full-width row). Renders a div.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ItemFooter

Footer below the item content (full-width row). Renders a div.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`