Collapsible

Collapsible content in a vertical stack.

Total visits

22.3%10.1%6.8%1.4%

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/collapsible.json

Usage


import { 
  Collapsible, 
  CollapsibleTrigger, 
  CollapsibleContent 
} from "@/components/ui/collapsible";


<Collapsible>
  <CollapsibleTrigger>Open Collapsible</CollapsibleTrigger>
  <CollapsibleContent>Collapsible Content</CollapsibleContent>
</Collapsible>

Controlled

Use the open and onOpenChange props to control the collapsible state programmatically.

❌

State

Disabled

Use the disabled prop on the collapsible to disable it.

Examples

Nested

Collapsibles can be nested to create hierarchical structures.

Getting started

We'll help you get started

Partial Collapse

Use the collapsedHeight prop to show a portion of the content when collapsed.

This is the first paragraph of content. When collapsed, only a portion of this content will be visible.

This is the second paragraph. It will be hidden when the collapsible is in its collapsed state.

This is the third paragraph. Expand the collapsible to see all the content.

This is the fourth paragraph. The collapsedHeight prop controls how much content is visible when collapsed.

Accessibility Notice

Interactive elements (links, buttons, inputs) within the collapsed area automatically become inaccesible to prevent keyboard navigation to hidden content.

API Reference

Collapsible

Root component. Controls expand/collapse state and animation.

Prop	Type	Default
`open`	`boolean`	`-`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`({ open }: OpenChangeDetails) => void`	`-`
`collapsedHeight`	`string`	`-`
`className`	`string`	`-`