Accordion

Vertically stacked expandable items with animated open/close transitions, two variants, five sizes, and full keyboard navigation.

Installation

pnpm add @tessinaui/ui

Usage

import {
  AccordionRoot,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionPanel,
} from "@tessinaui/ui";

<AccordionRoot>
  <AccordionItem value="item-1">
    <AccordionHeader>
      <AccordionTrigger>What is Tessera UI?</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>
      A code-first design system with React, TypeScript, and Tailwind CSS.
    </AccordionPanel>
  </AccordionItem>

  <AccordionItem value="item-2">
    <AccordionHeader>
      <AccordionTrigger>Does it support dark mode?</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>
      Yes — all colours use CSS custom properties mapped to semantic tokens.
    </AccordionPanel>
  </AccordionItem>
</AccordionRoot>

Playground

Preview

Showcase

Preview

API Reference

AccordionRoot props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Scales text, icon, and spacing
`variant`	`"ghost" \| "outline"`	`"ghost"`	Visual style — ghost has bottom-border separators; outline wraps each item in a rounded card
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Text direction — in RTL the chevron icon moves to the left side
`value`	`string[]`	—	Controlled array of open item values
`defaultValue`	`string[]`	—	Uncontrolled initial open values
`onValueChange`	`(value: string[]) => void`	—	Called when open items change
`multiple`	`boolean`	`false`	Allow multiple items open at once
`disabled`	`boolean`	`false`	Disables all items
`loopFocus`	`boolean`	`true`	Loop keyboard focus from last to first item
`hiddenUntilFound`	`boolean`	`false`	Uses `hidden="until-found"` so closed panels are discoverable by browser search
`keepMounted`	`boolean`	`false`	Keep panel in the DOM when closed

AccordionItem props

Prop	Type	Description
`value`	`any`	Unique identifier for this item (auto-generated if omitted)
`disabled`	`boolean`	Disables this item only
`onOpenChange`	`(open: boolean) => void`	Called when this item opens or closes

AccordionHeader props

Renders an <h3> element. Accepts all standard heading HTML attributes and a className for overrides.

AccordionTrigger props

The full-width button row that expands/collapses the panel. Renders a <button> with the title on the left and an animated chevron circle on the right. Accepts all standard button HTML attributes.

AccordionPanel props

Prop	Type	Description
`hiddenUntilFound`	`boolean`	Override `hiddenUntilFound` on this panel specifically
`keepMounted`	`boolean`	Override `keepMounted` on this panel specifically

Animates open/close via a CSS grid-template-rows transition (no layout-thrashing height calculations).

Accordion

On this page