Accordion
Vertically stacked expandable items with animated open/close transitions, two variants, five sizes, and full keyboard navigation.
Playground
Installation
pnpm add @tessinaui/uiUsage
import {
AccordionRoot,
AccordionItem,
AccordionHeader,
AccordionTrigger,
AccordionPanel,
} from "@tessinaui/ui";<AccordionRoot>
<AccordionItem value="item-1">
<AccordionHeader>
<AccordionTrigger>What is Tessina 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>Showcase
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).
Tabs
Organise content into switchable panels with animated indicators, four variants, five sizes, five intents, icon/badge/closable support, vertical orientation, and full RTL/keyboard navigation.
Collapsible
A single disclosure that animates open and closed — built on Base UI's Collapsible primitive with four variants, five sizes, intent accents, and full RTL support.