Item

A list of rows on shared keylines: a square media cell, the content, a value and the row's controls. Pass render to make the whole row a link or a button, and current to mark the one that is open.

Loading the live example…

"use client"

import { useState } from "react"
import { Item, ItemActions, ItemContent, ItemList, ItemMedia } from "@/components/keyline/ui/item"
import { Switch } from "@/components/keyline/ui/switch"

const ALERTS = [
  { id: "new", code: "ORD", title: "New orders", desc: "When a client places an order through the website." },
  { id: "held", code: "DLV", title: "Held deliveries", desc: "When Darryl can't get a signature." },
  { id: "low", code: "STK", title: "Low paper stock", desc: "When a grade drops under a week's deliveries." },
  { id: "party", code: "PTY", title: "Party planning", desc: "Every message from the committee." },
]

export function AlertSettings() {
  const [on, setOn] = useState<Record<string, boolean>>({ new: true, held: true, low: false, party: false })
  return (
    <ItemList aria-label="Email me about">
      {ALERTS.map((a) => (
        <Item key={a.id}>
          <ItemMedia>{a.code}</ItemMedia>
          <ItemContent title={<span id={`alert-${a.id}`}>{a.title}</span>} description={a.desc} />
          <ItemActions>
            <Switch aria-labelledby={`alert-${a.id}`} checked={on[a.id]} onCheckedChange={(v) => setOn((s) => ({ ...s, [a.id]: v }))} />
          </ItemActions>
        </Item>
      ))}
    </ItemList>
  )
}

Installation

npx shadcn@latest add @keyline-ui/item

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { Item, ItemActions, ItemContent, ItemList, ItemMedia, ItemMeta } from "@/components/keyline/ui/item"

<ItemList aria-label="Email me about">
  <Item>
    <ItemMedia>ORD</ItemMedia>
    <ItemContent title="New orders" description="…" />
    <ItemActions><Switch aria-label="New orders" /></ItemActions>
  </Item>
</ItemList>

Props

Prop	Type	Default	Description
`layout`	`"control" \| "cell"`	`"control"`	On `ItemList`: `cell` is the body of an enclosing frame.
`render`	`ReactElement`	`—`	On `Item`: `<a href>` or `<button>` makes the row interactive.
`current`	`boolean`	`false`	On `Item`: the row that is open; its media cell floods.
`ItemMedia`	`span`	`—`	A 16px icon, an initial or a code of up to four characters.
`title · description`	`ReactNode`	`—`	On `ItemContent`.
`ItemMeta · ItemActions`	`span`	`—`	A trailing value in the code voice, and the row's controls.

The Inspector, Resizable and Scroll area examples use clickable Item rows.