Collapsible frame
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A deployment status note in a stacked Frame, open on load, its whole header row toggling the release summary
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 summary whose key status stays visible while only the extra details hide: use the Collapsible Basic 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-6.mdget_example("c-collapsible-6")npx shadcn@latest add @reui/c-collapsible-6Shadcn Components in Collapsible In Frame
About Shadcn Collapsible In Frame
Collapsible frame. Built by composing Collapsible, Frame. A free, open source shadcn collapsible example you can install with npx shadcn@latest add @reui/c-collapsible-6 and edit as your own code.
What You Can Build With Shadcn Collapsible In Frame
- Composes Collapsible, Frame, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-collapsible-6
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Collapsible Examples
- Basic Basic collapsible
- Checkbox Settings Collapsible with checkbox settings
- Animated Card Collapsible animated card
- Bottom Trigger Collapsible card with bottom trigger
- Form Fields Collapsible form fields
- 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 In Frame?
Use it for a deployment status note in a stacked Frame, open on load, its whole header row toggling the release summary.
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 summary whose key status stays visible while only the extra details hide, use the Collapsible Basic 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 In Frame?
Is Shadcn Collapsible In Frame free to use?
Which components does Shadcn Collapsible In Frame 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.