Yugen UI

Accordion

Accordion organizes content into expandable / collapsible sections to reduce information overload.

Open one item at a time (type="single", optionally collapsible) or several (type="multiple"). There are three appearances: flush (continuous, default), separated (each item is a card with an 8px radius and shadow-2) and outline (one shared border with dividers between items). A header can have an icon and a description line. An Accordion nested in a panel inherits its parent's size and shows a vertical guide line for the hierarchy. Panels animate their height and respect reduced motion.

A React + Tailwind CSS v4 component library that follows the Microsoft Fluent 2 design language.

Yes. Every color comes from a token and follows the data-theme attribute.

Set data-brand="teams" (or your own brand) on the root element.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Changes apply to every signed-in device.

Turn on two-step verification so your account stays safe even if your password leaks.

Invoices are emailed on the 1st of every month.

Separated: cards with icon & description

appearance="separated": each item is a card; description is a secondary line under the title (read right after the title, as part of the button's name).

Free on orders over $50.00; arrives in 2–4 days.

Return within 30 days with the tags and receipt.

This feature is in progress.

Outline, multiple items & chevron at the end

appearance="outline": one shared border with stroke-2 dividers; type="multiple", expandIconPosition="end", a disabled item.

Installation, YugenProvider and your first component.

Theme, brand and text direction.

Ready-made layouts you can copy as whole files.

Nested

An Accordion inside an AccordionPanel inherits the parent's size / expandIconPosition and has a vertical guide line along the start edge.

Small panel content.

Medium panel content.

Large panel content.

Extra-large panel content.

Size

small, medium (default), large, extra-large.

Usage

Do
  • Keep titles short and clear about what's inside; use description for a one-line summary.
  • Use separated for settings or FAQ pages that stand out from the background; use outline when the Accordion sits on a surface of the same color.
  • Open the most important item by default (defaultValue); use type="multiple" when people need to compare items.
Don't
  • Don't hide information people must read in a collapsed item.
  • Don't nest more than 2 levels. For deeper hierarchies, use Tree.
  • Don't mix appearances in one group of items.

Props

Prop · TypeDefaultDescription
type"single" | "multiple"Default: —One or several items open at a time (required).
collapsiblebooleanDefault: falsetype="single": lets people close the open item.
value / defaultValue / onValueChangestring | string[]Default: —Open item(s).
appearance"flush" | "separated" | "outline"Default: "flush"Continuous · separate cards (rounded-xlarge, shadow-2) · border with dividers.
size"small" | "medium" | "large" | "extra-large"Default: "medium"Header size; a nested Accordion follows its parent by default.
expandIconPosition"start" | "end"Default: "start"Chevron position; a nested Accordion follows its parent by default.
AccordionItem.value / disabledstring / booleanDefault: —Item identifier; disables the item.
AccordionHeader.iconReactNodeDefault: —Size 20 icon before the title.
AccordionHeader.descriptionReactNodeDefault: —Secondary line (caption) under the title; part of the button's accessible name (matches the visible text, WCAG 2.5.3).