Components
Loading preview...
A set of collapsible panels with headings and content. Built on Base UI with smooth height animations and full keyboard navigation.
npx shadcn@latest add https://21st.dev/r/coss.com/coss-accordionimport { useState } from "react";
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "../components/ui/coss-accordion";
export default function Demo() {
const [value, setValue] = useState<string[]>([]);
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background text-foreground p-8">
<div className="flex w-full max-w-lg 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"])}
className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
>
Open First Two
</button>
<p className="text-muted-foreground text-sm">
Open items: {value.length > 0 ? value.join(", ") : "None"}
</p>
</div>
</div>
</div>
);
}