ComponentsUpdated Sep 9, 2026

Cell

The list-item surface used across the sidepanel and home: meetings, actions, history. Focusable, optionally clickable, with slots for an icon, title, content, metadata, footer, and status banner.

Import

Source: packages/ui/src/components/cell

tsx

1import { Cell, cellVariants, UnreadDot } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

tsx

1<Cell onClick={open}>2  <Cell.Header>3    <Cell.Icon>4      <Calendar />5    </Cell.Icon>6    <Cell.Title>Roadmap review</Cell.Title>7  </Cell.Header>8  <Cell.Content>Agreed to ship the design system before the Windows beta.</Cell.Content>9  <Cell.Metadata>10    <Badge>45 min</Badge>11    <Badge>6 people</Badge>12    <Badge>3 decisions</Badge>13  </Cell.Metadata>14</Cell>

Basic

Header with Icon and Title. unread adds the red dot; titles clamp to three lines.

Design sync

Recap: launch retro, with a title long enough to wrap onto a second line

tsx

1import { Calendar, FileText } from 'lucide-react'2import { Cell } from '@highlight/ui'3 4export default function CellBasic() {5  return (6    <div className="flex w-80 flex-col gap-3">7      <Cell onClick={() => {}}>8        <Cell.Header>9          <Cell.Icon>10            <Calendar />11          </Cell.Icon>12          <Cell.Title>Design sync</Cell.Title>13        </Cell.Header>14      </Cell>15      <Cell onClick={() => {}}>16        <Cell.Header>17          <Cell.Icon unread>18            <FileText />19          </Cell.Icon>20          <Cell.Title>Recap: launch retro, with a title long enough to wrap onto a second line</Cell.Title>21        </Cell.Header>22      </Cell>23    </div>24  )25}

Fully composed

Content, Metadata (scrolls with fades when it overflows), and Footer.

Roadmap review

Agreed to ship the design system before the Windows beta. Lin owns the Figma sync spike.

45 min6 people3 decisions2 open questions

Today, 2:00 PMNotes ready

tsx

1import { Calendar, Clock, Users } from 'lucide-react'2import { Badge, Cell } from '@highlight/ui'3 4export default function CellComposed() {5  return (6    <Cell className="w-96" onClick={() => {}}>7      <Cell.Header>8        <Cell.Icon>9          <Calendar />10        </Cell.Icon>11        <Cell.Title>Roadmap review</Cell.Title>12      </Cell.Header>13      <Cell.Content>14        Agreed to ship the design system before the Windows beta. Lin owns the Figma sync spike.15      </Cell.Content>16      <Cell.Metadata>17        <Badge left={<Clock />}>45 min</Badge>18        <Badge left={<Users />}>6 people</Badge>19        <Badge>3 decisions</Badge>20        <Badge>2 open questions</Badge>21      </Cell.Metadata>22      <Cell.Footer>23        <span>Today, 2:00 PM</span>24        <span>Notes ready</span>25      </Cell.Footer>26    </Cell>27  )28}

success, warning, danger; action places a control on the right.

Customer call

Recap sent to #sales

Customer call

Transcript incomplete

Customer call

Microphone permission denied

tsx

1import { Mic } from 'lucide-react'2import { Button, Cell } from '@highlight/ui'3 4export default function CellBanner() {5  return (6    <div className="flex w-96 flex-col gap-3">7      <Cell onClick={() => {}}>8        <Cell.Header>9          <Cell.Icon>10            <Mic />11          </Cell.Icon>12          <Cell.Title>Customer call</Cell.Title>13        </Cell.Header>14        <Cell.Banner variant="success">Recap sent to #sales</Cell.Banner>15      </Cell>16      <Cell onClick={() => {}}>17        <Cell.Header>18          <Cell.Icon indicator="attention">19            <Mic />20          </Cell.Icon>21          <Cell.Title>Customer call</Cell.Title>22        </Cell.Header>23        <Cell.Banner24          variant="warning"25          action={26            <Button size="xs" variant="outline">27              Retry28            </Button>29          }30        >31          Transcript incomplete32        </Cell.Banner>33      </Cell>34      <Cell onClick={() => {}}>35        <Cell.Header>36          <Cell.Icon>37            <Mic />38          </Cell.Icon>39          <Cell.Title>Customer call</Cell.Title>40        </Cell.Header>41        <Cell.Banner variant="danger">Microphone permission denied</Cell.Banner>42      </Cell>43    </div>44  )45}

Compact, pending, static

size="compact" tightens padding and icon. Progress paints a countdown bar. clickable={false} drops the button role.

Standup

1:1 with Lin

Not clickable

tsx

1import { Calendar } from 'lucide-react'2import { Cell } from '@highlight/ui'3 4export default function CellCompact() {5  return (6    <div className="flex w-80 flex-col gap-2">7      <Cell size="compact" onClick={() => {}}>8        <Cell.Header showChevron={false}>9          <Cell.Icon>10            <Calendar />11          </Cell.Icon>12          <Cell.Title>Standup</Cell.Title>13        </Cell.Header>14      </Cell>15      <Cell size="compact" isPending onClick={() => {}}>16        <Cell.Header showChevron={false}>17          <Cell.Icon>18            <Calendar />19          </Cell.Icon>20          <Cell.Title>1:1 with Lin</Cell.Title>21        </Cell.Header>22        <Cell.Progress duration={8000} startTime={new Date()} />23      </Cell>24      <Cell size="compact" clickable={false}>25        <Cell.Header showChevron={false}>26          <Cell.Icon>27            <Calendar />28          </Cell.Icon>29          <Cell.Title>Not clickable</Cell.Title>30        </Cell.Header>31      </Cell>32    </div>33  )34}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Cell: The row: a div (a motion div when animated) that hands its parts size and state through context.
Cell.Header: Row for Icon + Title; indicator slot; showChevron.
Cell.Icon: Tile for an icon; size, subIcon, unread, indicator.
Cell.Title: Clamped title text.
Cell.Content: Recessed body block.
Cell.Metadata: Horizontal row of Badges with overflow fades and scroll buttons.
Cell.Footer: Bottom row, space-between.
Cell.Banner: variant: 'success' | 'warning' | 'danger'; action.
Cell.Progress: duration, startTime, onComplete countdown bar along the bottom edge.

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`size`	'default' \| 'compact'	'default'	Padding and icon size for all parts.
`clickable`	boolean	true	With onClick, adds role="button" and Enter/Space handling.
`focused`	boolean	false	Force the keyboard focus ring.
`isPending`	boolean	false	Pending styling for cells awaiting a result.
`layoutId / initial / animate / transition`	MotionProps	—	Opt into framer-motion. Must be stable for the cell’s lifetime.