Accordion
A set of collapsible panels with headings and content.
Accordion wraps the
Base UI Accordion primitive,
animates its panel height, and rotates a Tabler chevron as each item expands. It
is a client component: it manages open state and exposes AccordionPanel as
AccordionContent.
Installation
npx shadcn@latest add @kosori/accordionExample
accordion-example.tsx
Of course! Base UI is free and open source.
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from '@/components/ui/accordion';
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?',
},
];
const AccordionExample = () => (
<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>
);
export default AccordionExample;
Usage
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from '@/components/ui/accordion';
const AccordionDemo = () => (
<Accordion>
<AccordionItem>
<AccordionTrigger>What is kosori?</AccordionTrigger>
<AccordionPanel>Components you can copy and own.</AccordionPanel>
</AccordionItem>
</Accordion>
);