Collapsible
One section that opens and closes: the height springs open, the content fades and lifts in, and the chevron turns. Controlled or uncontrolled.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Collapsible
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | — | |
children | ReactNode | — | |
open / defaultOpen | boolean | false | |
onOpenChange | (open: boolean) => void | — | |
className | string | — |
About Collapsible
Collapsible is one section that opens and closes: the height springs open, the content fades and lifts in, and the chevron turns. Use it controlled or uncontrolled, for FAQs, filters and settings.
Collapsible is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Collapsible
- Single FAQ entries.
- Filter groups in sidebars.
- Advanced settings sections.
- Show more on long descriptions.
How it works
The trigger is a button with aria-expanded and aria-controls pointing at the panel. The panel animates its height to auto with Motion, and reduced motion opens it instantly.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Collapsible
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change defaultOpen live, and the Code tab updates to match, so the snippet you copy already carries your values.
- trigger (ReactNode).
- open / defaultOpen (boolean, default false).
Goes well with Collapsible
These display pieces share its tokens and motion language, so they sit together on one page without clashing.
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Collapsible
npx shadcn@latest add https://charcoalui.com/r/collapsible.jsonCollapsible is free and MIT licensed. The command copies collapsible.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Collapsible?
- Run npx shadcn@latest add https://charcoalui.com/r/collapsible.json. The shadcn CLI copies collapsible.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Collapsible free for commercial use?
- Yes. Collapsible is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Collapsible work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Collapsible?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Collapsible's props and source and get_install_command returns the exact command.