Cognition

Components

Item

A single structured row: a leading element, a primary label with an optional secondary line, and a trailing element. It gives lists and rows a consistent shape.

Preview

Rendered with live Cognition tokens. Hover and click the rows, no dark: classes.

Variants

<Item label="Overview" />
<Item leading={<Folder />} trailing={<ChevronRight />} />
<Item leading={<Avatar />} secondaryLabel="…" />
Email notificationsSend a summary each morning
<Item leading={<Checkbox />} />
<Item trailing={<Badge>Pro</Badge>} />
APArjun Prakasharjun@distyl.ai
<Item trailing={<Button size="icon-sm">…</Button>} />
<Item label="Billing" secondaryLabel="Invoices, payment method, and plan" />

Leading icons, avatars, or checkboxes; trailing badges or actions; and an optional secondary label all compose into the same row.

States

Default. Resting row.

Hover. The secondary surface fills in (shown statically).

Selected. Accent surface; click to toggle.

Disabled. Dimmed, inert.

Hover and focus apply only when the row is interactive (has an onClick). Selected and disabled read on the row itself.

API

Prop
Type
Default
Description
label
string
required
The primary text of the row.
secondaryLabel
string
undefined
A secondary line below the label.
leading
ReactNode
undefined
Leading element: an icon, avatar, or checkbox.
trailing
ReactNode
undefined
Trailing element: an action, badge, or status.
selected
boolean
false
Marks the row as selected with the accent surface.
disabled
boolean
false
Dims the row and blocks interaction.
onClick
() => void
undefined
When set, the row renders as a button with hover and focus.

Don't and Do

Don't

Don't use an Item as a navigation link. Moving between pages or sections is the job of a Sidebar nav item or a Navigation Menu link, which carry the right semantics and active states. An Item is a row of content or actions, not a destination.

Do
<Item
  label="Derek Ho"
  secondaryLabel="derek@distyl.ai"
  leading={<Avatar>…</Avatar>}
  trailing={<Badge>Owner</Badge>}
  onClick={open}
/>

Use Item to build lists, command palettes, settings rows, and any single-row layout that needs consistent leading and trailing composition.

import { Item } from "@/components/ui/item";
import { Folder } from "lucide-react";

export function ProjectRow() {
  return (
    <Item
      label="Projects"
      secondaryLabel="14 active"
      leading={<Folder />}
      onClick={openProjects}
    />
  );
}