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>Examples
Default
A single-open accordion in the default ghost variant.
Outline
Set variant="outline" to wrap each item in a bordered card.
Multiple
Add multiple to let more than one item stay open at once.
Disabled Item
Disable an individual item with the disabled prop on AccordionItem.
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).
Components
Browse the library — every component with a live preview. Pick one to see its examples, props, and code.
Action Sheet
A mobile-first bottom sheet presenting a set of contextual actions. Built on Base UI Dialog. Compound component pattern with Header, Group, Item, Separator, and Cancel. Three sizes. Five corner-rounding options. Destructive intent, loading state, icon slots. LTR and RTL support.