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

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

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

import { Calendar, FileText } from 'lucide-react'
import { Cell } from '@highlight/ui'

export default function CellBasic() {
  return (
    <div className="flex w-80 flex-col gap-3">
      <Cell onClick={() => {}}>
        <Cell.Header>
          <Cell.Icon>
            <Calendar />
          </Cell.Icon>
          <Cell.Title>Design sync</Cell.Title>
        </Cell.Header>
      </Cell>
      <Cell onClick={() => {}}>
        <Cell.Header>
          <Cell.Icon unread>
            <FileText />
          </Cell.Icon>
          <Cell.Title>Recap: launch retro, with a title long enough to wrap onto a second line</Cell.Title>
        </Cell.Header>
      </Cell>
    </div>
  )
}

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 min

6 people

3 decisions

2 open questions

Today, 2:00 PMNotes ready

tsx

import { Calendar, Clock, Users } from 'lucide-react'
import { Badge, Cell } from '@highlight/ui'

export default function CellComposed() {
  return (
    <Cell className="w-96" onClick={() => {}}>
      <Cell.Header>
        <Cell.Icon>
          <Calendar />
        </Cell.Icon>
        <Cell.Title>Roadmap review</Cell.Title>
      </Cell.Header>
      <Cell.Content>
        Agreed to ship the design system before the Windows beta. Lin owns the Figma sync spike.
      </Cell.Content>
      <Cell.Metadata>
        <Badge left={<Clock />}>45 min</Badge>
        <Badge left={<Users />}>6 people</Badge>
        <Badge>3 decisions</Badge>
        <Badge>2 open questions</Badge>
      </Cell.Metadata>
      <Cell.Footer>
        <span>Today, 2:00 PM</span>
        <span>Notes ready</span>
      </Cell.Footer>
    </Cell>
  )
}

Status banners

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

import { Mic } from 'lucide-react'
import { Button, Cell } from '@highlight/ui'

export default function CellBanner() {
  return (
    <div className="flex w-96 flex-col gap-3">
      <Cell onClick={() => {}}>
        <Cell.Header>
          <Cell.Icon>
            <Mic />
          </Cell.Icon>
          <Cell.Title>Customer call</Cell.Title>
        </Cell.Header>
        <Cell.Banner variant="success">Recap sent to #sales</Cell.Banner>
      </Cell>
      <Cell onClick={() => {}}>
        <Cell.Header>
          <Cell.Icon indicator="attention">
            <Mic />
          </Cell.Icon>
          <Cell.Title>Customer call</Cell.Title>
        </Cell.Header>
        <Cell.Banner
          variant="warning"
          action={
            <Button size="tiny" variant="secondary">
              Retry
            </Button>
          }
        >
          Transcript incomplete
        </Cell.Banner>
      </Cell>
      <Cell onClick={() => {}}>
        <Cell.Header>
          <Cell.Icon>
            <Mic />
          </Cell.Icon>
          <Cell.Title>Customer call</Cell.Title>
        </Cell.Header>
        <Cell.Banner variant="danger">Microphone permission denied</Cell.Banner>
      </Cell>
    </div>
  )
}

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

import { Calendar } from 'lucide-react'
import { Cell } from '@highlight/ui'

export default function CellCompact() {
  return (
    <div className="flex w-80 flex-col gap-2">
      <Cell size="compact" onClick={() => {}}>
        <Cell.Header showChevron={false}>
          <Cell.Icon>
            <Calendar />
          </Cell.Icon>
          <Cell.Title>Standup</Cell.Title>
        </Cell.Header>
      </Cell>
      <Cell size="compact" isPending onClick={() => {}}>
        <Cell.Header showChevron={false}>
          <Cell.Icon>
            <Calendar />
          </Cell.Icon>
          <Cell.Title>1:1 with Lin</Cell.Title>
        </Cell.Header>
        <Cell.Progress duration={8000} startTime={new Date()} />
      </Cell>
      <Cell size="compact" clickable={false}>
        <Cell.Header showChevron={false}>
          <Cell.Icon>
            <Calendar />
          </Cell.Icon>
          <Cell.Title>Not clickable</Cell.Title>
        </Cell.Header>
      </Cell>
    </div>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

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.