Collapsible

Show and hide a region with an animated height. The building block behind disclosure patterns.

NavigationRadix Collapsible

Starred repositories

shadcn-ui/ui

Playground

Tweak the props, the preview and the code follow.

3 environment variables

DATABASE_URL

Props

open

hidden items2

const [open, setOpen] = React.useState(false)

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger asChild>
    <Button size="icon-sm" variant="ghost"><ChevronsUpDown /></Button>
  </CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

Installation

npx @plumsydev/plum-ui add collapsible

Usage

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

<Collapsible>
  <CollapsibleTrigger>Show more</CollapsibleTrigger>
  <CollapsibleContent>Hidden content</CollapsibleContent>
</Collapsible>

Examples

Disclosure

A rotating chevron driven by data-state.

Build failed12.4s

Sidebar

Collapsible groups make a compact, nested navigation.

API Reference

Collapsible

Prop	Type	Default
`open / onOpenChange` Controlled state.	`boolean`	`—`
`defaultOpen` Initial state when uncontrolled.	`boolean`	`false`
`disabled` Prevents toggling.	`boolean`	`false`

PreviousCheckbox NextColor Picker