npm

Components

Accordion

A vertically stacked set of headers that each reveal a section of content, letting users expand only what they need.

Basic usage

Use type="single" with collapsible so only one section is open at a time. Every AccordionItem needs a unique value. The open and close slide is driven by the accordion-down / accordion-up keyframes that @comitor/ui/styles.css already imports — nothing to configure.

Comitor is a gold-and-ink design system for building polished, accessible product interfaces with React and Tailwind CSS.

Multiple open sections

Set type="multiple" to let several sections stay open at once. In this mode defaultValue takes an array of item values.

Orders ship within two business days via tracked courier.

Unused items can be returned within 30 days for a full refund.

Disabled items

Add disabled to an individual AccordionItem to lock it. It is skipped during keyboard navigation and dimmed to 50% opacity.

Restyling the parts

The default look is a stack of dividers. Because every part merges your className through cn, a card list is a two-class change on AccordionItem.

Where each className actually lands

  • AccordionItem → merged onto border-b last:border-b-0.
  • AccordionTrigger → merged onto the button. The chevron is appended by the component and rotates through [&[data-state=open]>svg]:rotate-180, so pass your own icon as a sibling rather than expecting to replace it.
  • AccordionContent → applied to the inner padding wrapper (pt-0 pb-4), not to the animated Radix element. That means the height animation and its overflow-hidden cannot be turned off from className — use Collapsible if you need full control of the transition.

Props

Every part forwards the full Radix prop set and exports its own prop type — AccordionProps, AccordionItemProps, AccordionTriggerProps and AccordionContentProps.

Accordion — the root that owns which items are open.

PropTypeDefaultDescription
typerequired'single' | 'multiple'—Whether one or several items can be open at the same time.
collapsiblebooleanfalseWhen type is 'single', allows closing the open item so all items can be collapsed.
defaultValuestring | string[]—The item(s) open by default in uncontrolled mode. Use an array when type is multiple.
valuestring | string[]—The controlled open item(s). Pair with onValueChange.
onValueChange(value: string | string[]) => void—Callback fired when the open item(s) change.
disabledbooleanfalseDisables every item in the accordion.
orientation'vertical' | 'horizontal''vertical'Which arrow keys move focus between triggers. The shipped styling assumes vertical.
dir'ltr' | 'rtl''ltr'Reading direction, affecting arrow-key navigation.
classNamestring—Additional Tailwind classes. The root carries no styling of its own.

AccordionItem — one header plus its panel.

PropTypeDefaultDescription
valuerequiredstring—Unique id for the item — this is what defaultValue and value refer to.
disabledbooleanfalseLocks this item only. Its trigger becomes a natively disabled button.
classNamestring—Merged onto the default border-b last:border-b-0 divider.

AccordionTrigger and AccordionContent.

PropTypeDefaultDescription
childrenrequiredReact.ReactNode—On AccordionTrigger, the header label; the chevron is appended for you.
classNamestring—On AccordionTrigger, merged onto the button. On AccordionContent, applied to the inner padding wrapper (pt-0 pb-4) rather than the animated element.
asChildbooleanfalseOn the Radix type but unusable here: AccordionTrigger appends the chevron as a second child, and Radix Slot throws on more than one child. Restyle the trigger through className instead.

Accessibility

  • Follows the WAI-ARIA Accordion pattern — each trigger is a <button> wired with aria-expanded and aria-controls, and the panel points back with aria-labelledby.
  • AccordionTrigger renders its own AccordionPrimitive.Header, which is a fixed <h3>. Place the accordion so that level fits the surrounding heading outline — there is no prop to change it.
  • Fully keyboard operable: Enter and Space toggle a section, while Arrow keys, Home, and End move focus between triggers.
  • Each trigger shows a brand gold focus-visible ring — ring-ring/50 offset against the page background — and the chevron rotates to reflect the open or closed state.
  • Disabled items render a natively disabled button carrying data-disabled, so they leave the tab order and the arrow-key ring, and dim to 50% opacity.
  • With type="single" and no collapsible, the open trigger is marked aria-disabled because it can no longer be toggled shut — add collapsible if that reads as a bug to your users.