Collapsible
A collapsible panel controlled by a button trigger.
Collapsible wraps the
Base UI Collapsible
primitive, animates its panel height, and exposes CollapsiblePanel as
CollapsibleContent. It is a client component: it manages open state and marks
each part with data-slot.
Installation
npx shadcn@latest add @kosori/collapsibleExample
collapsible-example.tsx
import { IconChevronDown } from '@tabler/icons-react';
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from '@/components/ui/collapsible';
const CollapsibleExample = () => (
<Collapsible>
<CollapsibleTrigger className='inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-180'>
Show recovery keys
<IconChevronDown className='size-4' />
</CollapsibleTrigger>
<CollapsiblePanel>
<ul className='flex flex-col gap-1 py-2 text-muted-foreground text-sm'>
<li className='rounded-sm bg-muted px-2 py-1 font-mono'>
4829-1735-6621
</li>
<li className='rounded-sm bg-muted px-2 py-1 font-mono'>
9182-6407-5532
</li>
<li className='rounded-sm bg-muted px-2 py-1 font-mono'>
3051-7924-9018
</li>
</ul>
</CollapsiblePanel>
</Collapsible>
);
export default CollapsibleExample;
Usage
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from '@/components/ui/collapsible';
const CollapsibleDemo = () => (
<Collapsible>
<CollapsibleTrigger>Show recovery keys</CollapsibleTrigger>
<CollapsiblePanel>4829-1735-6621</CollapsiblePanel>
</Collapsible>
);