Collapsible

An animated, accessible, and collapsible content area component.

Collapsible

Item 1

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/collapsible

Usage

1import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
2import { Button } from "@/components/ui/button";
3
4export function Example() {
5  return (
6      <Collapsible>
7      <CollapsibleTrigger asChild>
8        <Button>Show Details</Button>
9      </CollapsibleTrigger>
10      <CollapsibleContent>
11        <div className="p-4 border rounded mt-2">Here is detailed content!</div>
12        </CollapsibleContent>
13      </Collapsible>
14  );
15}

Props

Prop	Type	Description	Default
open	boolean	Open/closed state (controlled)	-
defaultOpen	boolean	Default open/closed state	false
onOpenChange	(open: boolean) => void	Called when the open/closed state changes	-
children	React.ReactNode	Content and trigger	-
className	string	Extra CSS classes	-