Collapsible

Collapsible content in a vertical stack.

Docs API

Total visits

22.3%10.1%6.8%1.4%

Installation


pnpm dlx shadcn@latest add @shark/collapsible

Anatomy


Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Usage


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


<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Controlled

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

❌

States

Disabled

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`	`-`