Collapse
A component that toggles the visibility of content with smooth animation.
Introduction
Collapse toggles the visibility of content sections with a smooth height animation. Built on Radix UI Collapsible for accessibility.
Installation
import { Collapse, CollapseTrigger, CollapseContent } from '@/components/ui/collapse';Usage
<Collapse>
<CollapseTrigger asChild>
<Button>Toggle</Button>
</CollapseTrigger>
<CollapseContent>
<p>Collapsible content here.</p>
</CollapseContent>
</Collapse>Examples
Default
import { Button } from '@/components/ui/button';
import { Collapse, CollapseTrigger, CollapseContent } from '@/components/ui/collapse';
export default function Component() {
return (
<Collapse className="flex flex-col gap-2">
<CollapseTrigger asChild><Button variant="outlined">Toggle Content</Button></CollapseTrigger>
<CollapseContent>
<div className="rounded-md border p-4"><p className="text-sm">Collapsible content.</p></div>
</CollapseContent>
</Collapse>
);
}API Reference
Collapse
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Initial open state |
onOpenChange | (open: boolean) => void | — | Change handler |