Accordion
accordionExpands one or multiple stacked content sections with height transitions.
Usage
Basic usage
Single opening mode: Expand at most one item at the same time, click the title to switch.
tsx
<Accordion className="w-80">
<AccordionItem value="ship">
<AccordionTrigger> How to publish the version of Hulian? </AccordionTrigger>
<AccordionPanel> Local master directly commit, trunk-based, the three doors are all green. </AccordionPanel>
</AccordionItem>
<AccordionItem value="token">
<AccordionTrigger>How to adapt colors to light and dark? </AccordionTrigger>
<AccordionPanel> Only consume semantics token, Tailwind v4 dark variant automatic skin change. </AccordionPanel>
</AccordionItem>
</Accordion>Expand by default
Use defaultValue to specify initially expanded items (uncontrolled).
Local master Direct commit, trunk-based, None remote. All three doors are green.
tsx
<Accordion defaultValue={["ship"]} className="w-80">
<AccordionItem value="ship">
<AccordionTrigger> How to publish the version of Hulian? </AccordionTrigger>
<AccordionPanel> Local master Direct commit. </AccordionPanel>
</AccordionItem>
{/* ...more item */}
</Accordion>Open more
multiple allows multiple expansions at the same time.
Local master Direct commit, trunk-based, None remote. All three doors are green.
Only consumes semantics token, prohibits writing naked values; Tailwind v4 dark variant automatically changes skin.
tsx
<Accordion multiple defaultValue={["ship", "token"]} className="w-80">
{/* item Same as above */}
</Accordion>Disabled item
Add disabled to AccordionItem. This item cannot be expanded and is grayed out.
Local master Direct commit, trunk-based, None remote. All three doors are green.
tsx
<Accordion defaultValue={["ship"]} className="w-80">
<AccordionItem value="ship">
<AccordionTrigger> How to publish the version of Hulian? </AccordionTrigger>
<AccordionPanel> Local master Direct commit. </AccordionPanel>
</AccordionItem>
<AccordionItem value="token" disabled>
<AccordionTrigger>How to adapt colors to light and dark? </AccordionTrigger>
<AccordionPanel> cannot be expanded. </AccordionPanel>
</AccordionItem>
</Accordion>When to use
Use Accordion for several adjacent title-and-content sections such as FAQs, settings groups, or documentation outlines. Items are mutually exclusive by default, with optional multiple expansion. Use Collapsible for one disclosure, or Command for navigation without collapsible content.
Import
ts
import { Accordion, AccordionItem, AccordionTrigger, AccordionPanel } from "@hulianui/ui"Props
Accordion, AccordionItem, AccordionTrigger, and AccordionPanel are thin wrappers around the matching Base UI primitives and forward all their props. Common props include:
| Name | Type | Default | Description |
|---|---|---|---|
Accordion.multiple | boolean | false | Whether multiple items can remain open. When false, opening one closes the previous item. |
Accordion.defaultValue | string[] | — | Initially expanded item values when uncontrolled. |
Accordion.value | string[] | — | Controlled expanded values. |
Accordion.className | string | — | Container class name. |
AccordionItem.value * | string | — | Unique item identifier used by value and defaultValue. |
AccordionItem.disabled | boolean | false | Whether the item cannot be expanded or collapsed. |
Events
| Event | Type | Description |
|---|---|---|
Accordion.onValueChange | (value: string[]) => void | Called when expansion changes. Pair it with value in controlled mode. |
Slots
| Slot | Type | Description |
|---|---|---|
AccordionTrigger.children | ReactNode | Title-row content. |
AccordionPanel.children | ReactNode | Collapsible panel content. |
Example
tsx
<Accordion defaultValue={["ship"]}>
<AccordionItem value="ship">
<AccordionTrigger>How do I release Hulian?</AccordionTrigger>
<AccordionPanel>Commit directly to local master in the trunk-based workflow after all three gates pass.</AccordionPanel>
</AccordionItem>
<AccordionItem value="token">
<AccordionTrigger>How do colors adapt to light and dark themes?</AccordionTrigger>
<AccordionPanel>Use semantic tokens; the Tailwind v4 dark variant switches them automatically.</AccordionPanel>
</AccordionItem>
</Accordion>Multiple expansion:
tsx
<Accordion multiple defaultValue={["ship", "token"]}>{/* Items */}</Accordion>Usage guidelines
- Expansion uses Base UI's
--accordion-panel-heightCSS variable and a CSS transition. Do not measurescrollHeightinuseLayoutEffector add an animation library. Put padding on an inner element so a closed panel can reach zero height. See [[base-ui-accordion-panel-height-css-var-pure-css-transition]]. - Choose controlled
valueor uncontrolleddefaultValue, not both.
Related
Command · ContextMenu · Toolbar · Collapsible · Link · AnimatedThemeToggler
Playground
Local master Direct commit, trunk-based, None remote. All three doors are green.
<Accordion defaultValue={["ship"]}>
<AccordionItem value="ship">
<AccordionTrigger> How to publish the version of Hulian? </AccordionTrigger>
<AccordionPanel>Local master Direct commit...</AccordionPanel>
</AccordionItem>
{/* ...more item */}
</Accordion>