Item

Item is the repo's answer to the common "rich list row" problem: more structured than a loose div, lighter than a card, and easier to scan than a table when each row needs title, metadata, optional copy, and actions. It is meant for believable work surfaces like queues, archives, and operational panels.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Item interactive>
  <ItemContent>
    <ItemTitle>Review queue item</ItemTitle>
    <ItemDescription>Compact rows can still feel typographic.</ItemDescription>
    <ItemMeta>
      <span>Needs review</span>
      <span>11:20</span>
    </ItemMeta>
  </ItemContent>
  <ItemActions>{/* buttons */}</ItemActions>
</Item>

Why This Primitive Exists

Rows show up everywhere in product UI, but they often become inconsistent one-offs. Item provides a small set of slots and variants so operational lists can stay aligned with the system's spacing and typography rules.

• Use it for moderate-density lists where each row has more than one piece of information.
• Reach for it when a card feels too heavy and a table feels too rigid.
• Keep the row focused on one object, task, or record rather than packing in unrelated controls.

Examples

Inline Review Row

The default inline layout works well when the row needs content on the left and a compact action rail on the right.

Stacked Layout

Use the stacked layout when the row needs longer copy, more tags, or action buttons that should naturally wrap under the content on smaller screens.

<Item layout="stacked" tone="quiet">
  <ItemContent>
    <ItemTitle>Release checklist entry</ItemTitle>
    <ItemDescription>Longer rows can stack without losing hierarchy.</ItemDescription>
  </ItemContent>
  <ItemActions>{/* resolve / assign */}</ItemActions>
</Item>

In Context

Items become more valuable when they sit inside a real surface. This pattern is useful for moderation queues, launch checklists, and compact archive summaries that need both scanability and action affordance.

Guidance

Choose Item Instead Of Card Or Table Deliberately

• Use Item when each record needs modest structure and optional actions.
• Use a Card when the content needs a heavier frame or more internal sections.
• Use a Table when comparison across columns matters more than row-by-row narrative.

Keep The Content Rail Tight

• ItemTitle should carry the main idea.
• Use ItemEyebrow and ItemMeta for category, state, or timing details.
• Keep descriptions short enough that rows still scan quickly in a list.

Use Variants For Density, Not Decoration

• layout="inline" is the default for compact operational rows.
• layout="stacked" works better when the row has more narrative copy or wraps on small screens.
• tone and interactive should reinforce behavior, not compensate for unclear information architecture.

API Reference

Item

The root Item renders a div and accepts standard React.ComponentProps<"div"> plus the variants below.

Exported Slots

itemVariants is also exported for cases where another wrapper needs to share the same layout contract.