Accordion

A set of collapsible panels with headings.

Of course! Base UI is free and open source.

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

const items = [
  {
    id: "1",
    title: "What is Base UI?",
    content:
      "Base UI is a library of high-quality unstyled React components for design systems and web apps.",
  },
  {
    id: "2",
    title: "How do I get started?",
    content:
      "Head to the \"Quick start\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.",
  },
  {
    id: "3",
    title: "Can I use it for my project?",
    content: "Of course! Base UI is free and open source.",
  },
]

export function AccordionDemo() {
  return (
    <Accordion className="w-full" defaultValue={["3"]}>
      {items.map((item) => (
        <AccordionItem value={item.id} key={item.id}>
          <AccordionTrigger>{item.title}</AccordionTrigger>
          <AccordionPanel>{item.content}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

Installation


pnpm dlx shadcn@latest add https://coss.com/ui/r/accordion.json

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

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

export function AccordionSingleDemo() {
  return (
    <Accordion className="w-full" multiple={false}>
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Base UI?</AccordionTrigger>
        <AccordionPanel>
          Base UI is a library of high-quality unstyled React components for
          design systems and web apps.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How do I get started?</AccordionTrigger>
        <AccordionPanel>
          Head to the "Quick start" guide in the docs. If you've used unstyled
          libraries before, you'll feel at home.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>
        <AccordionPanel>
          Of course! Base UI is free and open source.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  )
}

Multiple Accordion

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

export function AccordionMultipleDemo() {
  return (
    <Accordion className="w-full" multiple={true}>
      <AccordionItem value="item-1">
        <AccordionTrigger>What is Base UI?</AccordionTrigger>
        <AccordionPanel>
          Base UI is a library of high-quality unstyled React components for
          design systems and web apps.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How do I get started?</AccordionTrigger>
        <AccordionPanel>
          Head to the "Quick start" guide in the docs. If you've used unstyled
          libraries before, you'll feel at home.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>
        <AccordionPanel>
          Of course! Base UI is free and open source.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  )
}

Controlled Accordion

Open items: None

"use client"

import * as React from "react"

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

export function AccordionControlledDemo() {
  const [value, setValue] = React.useState<string[]>([])

  return (
    <div className="flex w-full flex-col gap-4">
      <Accordion className="w-full" value={value} onValueChange={setValue}>
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Base UI?</AccordionTrigger>
          <AccordionPanel>
            Base UI is a library of high-quality unstyled React components for
            design systems and web apps.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>How do I get started?</AccordionTrigger>
          <AccordionPanel>
            Head to the "Quick start" guide in the docs. If you've used unstyled
            libraries before, you'll feel at home.
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Can I use it for my project?</AccordionTrigger>
          <AccordionPanel>
            Of course! Base UI is free and open source.
          </AccordionPanel>
        </AccordionItem>
      </Accordion>

      <div className="flex flex-col items-start gap-4">
        <Button
          variant="outline"
          onClick={() => setValue(["item-1", "item-2"])}
        >
          Open First Two
        </Button>
        <p className="text-sm text-muted-foreground">
          Open items: {value.length > 0 ? value.join(", ") : "None"}
        </p>
      </div>
    </div>
  )
}

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.com 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

shadcn/ui

word:collapsible] 
<Accordion type="multiple" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Title</AccordionTrigger>
    <AccordionContent>Content</AccordionContent>
  </AccordionItem>
</Accordion>

coss.com ui

<Accordion multiple={false} defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Title</AccordionTrigger>
    <AccordionPanel>Content</AccordionPanel>
  </AccordionItem>
</Accordion>

Roadmap Alert

On This Page

Installation Usage Examples Single Accordion Multiple Accordion Controlled Accordion Comparing with Radix / shadcn Prop Mapping Quick Checklist Comparison Example