Accordion

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/accordion

UsageCopy Anchor Link

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";

<Accordion>
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionPanel>Orders ship within two business days.</AccordionPanel>
  </AccordionItem>
</Accordion>;

Give each AccordionItem a value. Use defaultValue to open items on first render, like defaultValue={["shipping"]}.

MultipleCopy Anchor Link

By default, opening an item closes the others. Set multiple to let several items stay open.

ControlledCopy Anchor Link

Pass value and onValueChange to control which items are open.

AccessibilityCopy Anchor Link

Each trigger is a button inside a heading, with aria-expanded and aria-controls set for you. Tab moves between triggers, and Enter or Space toggles the focused item.

API referenceCopy Anchor Link

Each part accepts every prop of its Base UI Accordion part: Accordion is Accordion.Root, AccordionItem is Accordion.Item, AccordionTrigger is Accordion.Trigger, and AccordionPanel is Accordion.Panel. AccordionPanel is also exported as AccordionContent.

The most common Accordion props: