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 {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "../components/ui/coss-accordion";
export default function Demo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background text-foreground p-8">
<div className="w-full max-w-lg">
<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>
</div>
</div>
);
}