CleenUI · Layout · Collapsible

Collapsible

Expand/collapse panel with smooth height animation and chevron rotation.

storybook.cleenui.com
Open Storybook
Live preview

Interactive Collapsible preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About Collapsible

Collapsible toggles the visibility of its children with a smooth height-animating transition. The trigger area shows a chevron that rotates as the panel opens and closes.

Use Collapsible for content that's useful but not always needed — FAQs, advanced settings, optional form sections. Controlled and uncontrolled modes are both supported.

When to use it

  • FAQ-style accordion panels.
  • Advanced/optional settings hidden by default.
  • Long-form detail sections in card layouts.
  • Help-content expansion areas inline with forms.

Common props

Prop
Type
Description
title
ReactNode
Trigger content (also clickable area).
open
boolean
Controlled open state.
defaultOpen
boolean
Initial open state (uncontrolled).
onOpenChange
(open: boolean) => void
Open/close handler.
duration
number
Animation duration in ms.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.