Launch prototype

Components

Accordion

An expand/collapse title/content list, animated with a real spring (motion/react) rather than a CSS transition. Extracted from the FAQ marketing section into its own reusable component.

Component Playground

Live instance - click a title to expand it.

Yes - 30 days, no card required.

Any time, from account settings.

Cancel any time - we refund the unused balance.

Controls

Behaviour

Variants

divided is the default - a borderless stacked list with a thin rule between items and large semibold titles, as used by the FAQ section. boxed gives each item its own bordered, rounded card with a smaller brand-coloured title and a divider between header and body, for dense detail panels such as the record-detail sidebar on Observations. Interaction and state logic are identical.

divided

Yes - 30 days, no card required.

Any time, from account settings.

Cancel any time - we refund the unused balance.

boxed

Yes - 30 days, no card required.

Any time, from account settings.

Cancel any time - we refund the unused balance.

Single open

By default any number of items can be open at once. Pass singleOpen to close the previously-open item whenever a new one opens - useful when items are long enough that having several open at once gets hard to scan.

singleOpen

Yes - 30 days, no card required.

Any time, from account settings.

Cancel any time - we refund the unused balance.

API

Accordion

PropTypeDefault
itemsAccordionItemType[]-
defaultOpenKeysKey[][]
openKeysSet<Key>-
onOpenKeysChange(keys: Set<Key>) => void-
singleOpenbooleanfalse
variant"divided" | "boxed" | "compact""divided"
actionPlacement"end" | "beforeChevron""end"
classNamestring-

AccordionItemType

FieldTypeDefault
idKey-
titleReactNode-
contentReactNode-
actionReactNode-

Usage

import { Accordion } from "@/components/base/accordion/accordion";

<Accordion
  items={[
    { id: "trial", title: "Is there a free trial?", content: "Yes - 30 days." },
    { id: "plan", title: "Can I change my plan?", content: "Any time." },
  ]}
  defaultOpenKeys={["trial"]}
/>

Where it's used

Marketing / FAQ accordion composes this component for its question/answer list, rather than hand-rolling its own expand/collapse state. The boxed variant is used for the per-section cards in the record-detail sidebar on Observations.

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.