Collapsible

A collapsible component for displaying content in a vertical stack.

Total visits

22.3%10.1%6.8%1.4%

Installation


pnpm dlx shadcn@latest add @shark-ui/collapsible

Usage


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


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

Examples

Nested

You can nest collapsibles inside each other to create hierarchical structures.

Getting started

We'll help you get started

Disabled

Use the disabled prop on the collapsible to disable it.

Controlled

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

State: closed

Partial Collapse

Use the collapsedHeight prop to show a portion of the content 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 element of the collapsible. Renders a div

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

CollapsibleTrigger

Button that toggles the collapsible. Renders a button

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

CollapsibleContent

Container for the collapsible content. Renders a div

Prop	Type	Default
`className`	`string`	`-`

CollapsibleIndicator

Indicator icon that rotates when the collapsible is open. Renders a span

Prop	Type	Default
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Nested Disabled Controlled Partial Collapse API Reference Collapsible CollapsibleTrigger CollapsibleContent CollapsibleIndicator