Basic collapsible
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: An order summary that keeps its status row in view and opens the shipping address and items from an icon button
When to use
- Cards and panels that hold back secondary detail, such as order items, a usage breakdown or a profile
- Optional settings, advanced form fields and single help answers kept closed until asked for
- Nested navigation menus and file trees, built by placing one collapsible inside another
When not to use
- A titled status panel that starts open and toggles from its whole header row: use the Collapsible In Frame example
- Several stacked sections that open and close as one group, often one at a time: use the Accordion component
- A large folder hierarchy that people move through and expand with arrow keys: use the Tree component
- A complete account or workspace configuration page of grouped switch rows: use the Settings blocks
Agent notes
- Base UI parts flag open state with
data-openon root and panel anddata-panel-openon the trigger, while Radix parts set a state attribute - A closed
CollapsibleContentrenders none of its children in either twin, so that text is missing from the server HTML - Base UI
CollapsibleTriggerswaps its element throughrenderand the Radix one throughasChild; each reads only its own prop
https://reui.io/components/collapsible/c-collapsible-1.mdget_example("c-collapsible-1")npx shadcn@latest add @reui/c-collapsible-1Shadcn Components in Collapsible Basic
About Shadcn Collapsible Basic
Basic collapsible. Built by composing Badge, Button, Collapsible. A free, open source shadcn collapsible example you can install with npx shadcn@latest add @reui/c-collapsible-1 and edit as your own code.
What You Can Build With Shadcn Collapsible Basic
- Composes Badge, Button, Collapsible, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-collapsible-1
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Collapsible Examples
- Checkbox Settings Collapsible with checkbox settings
- Animated Card Collapsible animated card
- Bottom Trigger Collapsible card with bottom trigger
- Form Fields Collapsible form fields
- In Frame Collapsible frame
- Nested List Nested collapsible list with actions
- User Profile Collapsible User profile
- Multi-Level Menu Multi-level collapsible menu
- File Tree Tree view with file actions
Related Shadcn Component Categories
Open-source shadcn color picker components for brand settings, theme editors, label colors, and design tools.
Open-source shadcn combobox components for searchable selection, async lookup, and command menus.
Open-source shadcn command menu components for command palettes, global search, and power-user navigation.
Open-source shadcn context menu components for right-click menus, file actions, and table row actions.
Open-source shadcn data grid components for sorting and filtering, virtualized tables, and admin dashboards.
Open-source shadcn date selector components for date range picking, booking windows, and calendar filters.
Frequently Asked Questions
When should I use Shadcn Collapsible Basic?
Use it for an order summary that keeps its status row in view and opens the shipping address and items from an icon button.
Shadcn Collapsible as a whole fits:
- Cards and panels that hold back secondary detail, such as order items, a usage breakdown or a profile
- Optional settings, advanced form fields and single help answers kept closed until asked for
- Nested navigation menus and file trees, built by placing one collapsible inside another
For a titled status panel that starts open and toggles from its whole header row, use the Collapsible In Frame example. For several stacked sections that open and close as one group, often one at a time, use the Accordion component. For a large folder hierarchy that people move through and expand with arrow keys, use the Tree component. For a complete account or workspace configuration page of grouped switch rows, use the Settings blocks.
How do I install Shadcn Collapsible Basic?
Is Shadcn Collapsible Basic free to use?
Which components does Shadcn Collapsible Basic use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.