Item

Your profile has been verified

You can now access every feature of your account.

Installation

npx shadcn@latest add @uqudo/item

Installing it also installs Separator, which ItemSeparator is built on.

Usage

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

<Item variant="outline">
  <ItemMedia variant="icon">
    <BadgeCheckIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">
      Action
    </Button>
  </ItemActions>
</Item>

ItemMedia, ItemContent and ItemActions are laid out in a row. ItemHeader and ItemFooter take the full width above or below that row.

Examples

Variants

Default

No border, no background.

Outline

Wrapped in a visible border.

Muted

Sits on a soft muted background.

Group

Wrap several items in ItemGroup to get a role="list" container with consistent spacing, and drop an ItemSeparator between them.

Amira Haddad

Compliance officer

Omar Farouk

Product designer

Lina Saleh

Software engineer

As link

With asChild, the item renders its child instead of a <div>, so a whole row can become an anchor.

Developer documentation

Guides and API references for the uqudo platform.

API Reference

Prop

Type

ItemMedia

Prop

Type

ItemSeparator

Prop

Type

Layout components

The remaining exports only forward className and native props.

Component	Renders	Notes
`ItemGroup`	`div`	`role="list"`, vertical stack of items.
`ItemContent`	`div`	Grows to fill the row; stacks title and description.
`ItemTitle`	`div`	Single-line, medium weight.
`ItemDescription`	`p`	Muted, clamped to two lines.
`ItemActions`	`div`	Row of buttons or icons at the end.
`ItemHeader`	`div`	Full-width row above the content.
`ItemFooter`	`div`	Full-width row below the content.

Data attributes

Attribute	Value
`data-slot`	`item`, `item-media`, `item-content`, `item-title`, etc.
`data-variant`	The resolved `variant` on `Item` and `ItemMedia`.
`data-size`	The resolved `size` on `Item`.

Item

On this page