Item for Ark UI

Media on one side, a title and a short line in the middle, and an action on the other.

Use it when each entry is one fact or one decision, like a person to invite. A block with its own header, body, and footer is a Card. In React, selection is not built in, so put the row in a menu that Ark UI already drives from the keyboard.

Installation

Anatomy

Usage

import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle,
} from "@/components/ui/item";

<div className="flex w-full max-w-md flex-col gap-6">
  <Item variant="outline">
    <ItemContent>
      <ItemTitle>Basic Item</ItemTitle>
      <ItemDescription>
        A simple item with title and description.
      </ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">
        Action
      </Button>
    </ItemActions>
  </Item>
  <Item asChild size="sm" variant="outline">
    <a href="#">
      <ItemMedia>
        <BadgeCheckIcon aria-hidden="true" className="size-5" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Your profile has been verified.</ItemTitle>
      </ItemContent>
      <ItemActions>
        <ChevronRightIcon aria-hidden="true" className="size-4" />
      </ItemActions>
    </a>
  </Item>
</div>

Accessibility

Demos

Variant

variant only changes the chrome. default is transparent, for a row inside a list that already has a container. outline adds a border so the row reads as its own control, and muted fills the background for a quieter notice under something louder.

Size

size changes padding and type, not what the row is for. Use default for a settings line someone should read, sm when a panel is full of entries, and xs inside a menu where the default height blows the popup open. The inbox icon stays put so the height is the only difference.

Icon

A security alert does not need a photo. ItemMedia with variant set to icon puts a boxed glyph at the start, and Review sits in the actions. Keep the icon aria-hidden when the title already says what happened, and use this variant for status, not for a person or a picture.

Avatar

People need a face, not a boxed icon, so the avatar goes in ItemMedia on the default media variant. One row is a single person with an icon button to invite them, and that button needs an aria-label because it has no word. The other stacks several faces beside a text Invite, for the team that is not there yet.

Image

Album art uses the image variant of ItemMedia: a thumbnail, not a banner across the top. Each song is the whole link, with the title and album, the artist below, and the duration in a second content block at the end. A picture that should span the row belongs in ItemHeader, not this slot.

Group

ItemGroup stacks the rows at one width and exposes them as a list. These are people you might invite, each an outline row with an avatar, a name, an email, and a round icon button. The group does not track a selection, so it is the wrong wrapper if the point is choosing one person.

Header

The picture is the top of the block, not a thumbnail in the gutter. ItemHeader spans the row above the title, here a square cover for each model, with the name and a one-line description under it in a three-column grid. Use the header for a cover or a preview, and ItemMedia when the image should sit beside the text.

Link

If the title and the description go to one place, the whole row should be the link. One row stays on this site and shows a chevron, and the other sets target to _blank plus rel so it opens in a new tab with an external-link icon. Leave buttons out of that row, or you have a second hit target you did not mean to add.

Dropdown

The row does not move focus or remember a value, so a person picker belongs inside a menu item. Each option is an xs item, avatar plus name plus email, narrow so the popup stays tight, and the menu owns the keyboard. Use it when a single text label would drop the address line you still want on screen.

Rtl

The opening two rows again, in Arabic, with dir set to rtl, so the title, the action, and the icon sit on the reading side without you swapping markup. Set direction on a wrapper or on the document. Physical left and right margins fight that, which is why logical spacing is the one to reach for if the row needs tweaking.

FAQ

API Reference