Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
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";
export default function Particle() {
const items = [
{
content:
"Base UI is a library of high-quality unstyled React components for design systems and web apps.",
id: "1",
title: "What is Base UI?",
},
{
content:
"Head to the \"Quick start\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.",
id: "2",
title: "How do I get started?",
},
{
content: "Of course! Base UI is free and open source.",
id: "3",
title: "Can I use it for my project?",
},
];
return (
<Accordion className="w-full" defaultValue={["3"]}>
{items.map((item) => (
<AccordionItem key={item.id} value={item.id}>
<AccordionTrigger>{item.title}</AccordionTrigger>
<AccordionPanel>{item.content}</AccordionPanel>
</AccordionItem>
))}
</Accordion>
);
}
Installation
pnpm dlx shadcn@latest add @coss/accordion
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>API Reference
Accordion
Root component. Alias for Accordion.Root from Base UI.
AccordionItem
Individual accordion item container. Styled wrapper for Accordion.Item from Base UI with bottom border styling.
AccordionTrigger
Trigger button that toggles the accordion panel. Styled wrapper for Accordion.Trigger from Base UI. Includes a built-in chevron icon that rotates when expanded.
AccordionPanel
Collapsible content panel. Styled wrapper for Accordion.Panel from Base UI with animated height transitions. Also exported as AccordionContent.
Examples
Single Accordion
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Particle() {
return (
<Accordion className="w-full">
<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 default function Particle() {
return (
<Accordion className="w-full" multiple>
<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 { useState } from "react";
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
export default function Particle() {
const [value, setValue] = useState<string[]>([]);
return (
<div className="flex w-full flex-col gap-4">
<Accordion className="w-full" onValueChange={setValue} value={value}>
<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
onClick={() => setValue(["item-1", "item-2"])}
variant="outline"
>
Open First Two
</Button>
<p className="text-muted-foreground text-sm">
Open items: {value.length > 0 ? value.join(", ") : "None"}
</p>
</div>
</div>
);
}