Collapsible card with bottom trigger
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A billing usage card with a progress bar whose round chevron button, centered on the bottom edge, opens a cost breakdown
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
- 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
- The Billing
Buttonhas no handler andProgressis fixed at avalueof 90; wire both to your billing data - The round trigger is
absoluteand hangs past the card's bottom edge, so leave space below or it overlaps the next element - 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-4.mdget_example("c-collapsible-4")npx shadcn@latest add @reui/c-collapsible-4Shadcn Components in Collapsible Bottom Trigger
About Shadcn Collapsible Bottom Trigger
Collapsible card with bottom trigger. Built by composing Button, Card, Collapsible, Progress. A free, open source shadcn collapsible example you can install with npx shadcn@latest add @reui/c-collapsible-4 and edit as your own code.
What You Can Build With Shadcn Collapsible Bottom Trigger
- Composes Button, Card, Collapsible, Progress, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-collapsible-4
- 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
- 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 Bottom Trigger?
Use it for a billing usage card with a progress bar whose round chevron button, centered on the bottom edge, opens a cost breakdown.
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 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 Bottom Trigger?
Is Shadcn Collapsible Bottom Trigger free to use?
Which components does Shadcn Collapsible Bottom Trigger 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.