Collapsible
A collapsible panel controlled by a button trigger.
Collapsible wraps the
Base UI Collapsible
primitive, springs its panel height open and closed on the smooth preset, and
exposes CollapsiblePanel as CollapsibleContent. Once a panel settles open it
stops clipping, so nested content is not cut off. 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>
);