║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Accordion description: A set of collapsible panels with headings.

links: doc: https://base-ui.com/react/components/accordion#api-reference

<ComponentPreview name="accordion-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/accordion

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="accordion" title="components/ui/accordion.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

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

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Examples

Single Accordion

<ComponentPreview name="accordion-single" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

Multiple Accordion

<ComponentPreview name="accordion-multiple" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

Controlled Accordion

<ComponentPreview name="accordion-controlled" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" align="start" />

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.

Prop Mapping

| Component | Radix UI Prop | Base UI Prop | | ----------- | ----------------------------------------- | ------------------------------------- | | Accordion | type (enum, "single" or "multiple") | multiple (boolean, default: true) | | Accordion | collapsible | removed |

Quick Checklist

• Replace type="single" → multiple={false} on Accordion
• Remove type="multiple" from Accordion
• Remove collapsible from Accordion
• Always use arrays for defaultValue
• Use AccordionPanel going forward; AccordionContent remains for legacy
• If you used asChild on parts, switch to the render prop

Comparison Example

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:type="multiple"] // [!code word:collapsible] // [!code word:"item-1":1] <Accordion type="multiple" collapsible defaultValue="item-1"> <AccordionItem value="item-1"> <AccordionTrigger>Title</AccordionTrigger> <AccordionContent>Content</AccordionContent> </AccordionItem> </Accordion> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:multiple={false}] // [!code word:\{\["item-1"\]\}] <Accordion multiple={false} defaultValue={["item-1"]}> <AccordionItem value="item-1"> <AccordionTrigger>Title</AccordionTrigger> <AccordionPanel>Content</AccordionPanel> </AccordionItem> </Accordion> ``` </span>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║