Vibe UI
Initializing Vibe UI System...
Vibe UI

Collapsible

An interactive container component that toggles vertical visibility of content sections with smooth animations.

Collapsible

An interactive container component that toggles vertical visibility of content sections with smooth animations.

System Preferences
This panel content is always visible.
This sub-content slides open when triggered.

Installation

pnpm dlx vibe-ui-kit@latest add collapsible

Themes

Customize and style the collapsible component with our pre-built premium design themes.

Default Theme
This panel content is always visible.
This sub-content slides open when triggered.
Glass Theme
This panel content is always visible.
This sub-content slides open when triggered.
Retro Theme
This panel content is always visible.
This sub-content slides open when triggered.
Glow Theme
This panel content is always visible.
This sub-content slides open when triggered.

Directory Tree

An interactive directory structure representing a real-world IDE workspace tree using nested collapsibles.

Workspace Tree
vibe-ui
apps
docs
next.config.js
package.json
packages
ui
src
components
button.tsx
collapsible.tsx
turbo.json
pnpm-workspace.yaml

Props

PropTypeDefaultDescription
openbooleanfalseThe controlled open state of the collapsible.
defaultOpenbooleanfalseThe initial open state when rendering uncontrolled.
onOpenChange(open: boolean) => void-Event handler called when the open state of the collapsible changes.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Collapsible | Vibe UI