Skip to content
Cuelark UI
Display

Item

A flexible row: media, title, description and actions.

Item is the row behind settings pages, lists and search results: a media slot, a title and description that truncate cleanly, and an actions slot. As a link it gets a hover surface.

Preview

Push notifications
Mentions, replies and deploy results.
Two-factor authentication
Protect your account with a second step.
On

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/item.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/item.

Usage

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

<Item variant="outline">
  <ItemMedia><BellIcon /></ItemMedia>
  <ItemContent><ItemTitle>Notifications</ItemTitle></ItemContent>
  <ItemActions><Switch /></ItemActions>
</Item>

API reference

Item

PropTypeDefaultDescription
variant"default" | "outline" | "muted""default"Surface.
size"sm" | "md""md"Padding.
asChildboolean—Render a link.

ItemMedia · ItemContent · ItemTitle · ItemDescription · ItemActions

Accessibility

  • As a link, the whole row is one focusable target with a visible ring.

FAQ

Also searched as: react list item component · settings row · shadcn item · list row ui · settings list react