Shadcn Cascader Tree Multi-Select
Cascading tree multi-select inside a popover. Built by composing Button, Cascader, Cascader Item, Cascader Nav, Cascader Types. A free, open source shadcn cascader example you can install with npx shadcn@latest add @reui/c-cascader-18 and edit as your own code.
A cascading tree with indeterminate branches in a popover, bounded by the positioner's available height.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Shipping zones by continent, region and country, where 1 press takes a whole region and the trigger names top picks plus a country total
When to use
- Form fields that commit one value from a nested tree, such as a category, region, file or department
- Picking several nodes at once, such as permissions, report columns or shipping zones with cascading checks
- Deep or large hierarchies as Miller columns, an expanding tree, an inline panel or levels fetched on demand
When not to use
- Permissions picked one by one under a cap, with no parent and child linking: use the Cascader Multi-Select Cap example
- A short flat list of options with no nesting: use the Select component
- A folder hierarchy browsed on the page rather than picked into a form field: use the Tree component
- A table of records whose cells are edited in place and saved together: use the Editing blocks
Agent notes
- Under
cascade, ticking a region puts the region and every country invalue; filter to leaves asZoneValuedoes before saving - Leave
maxHeightoffCascaderListhere; the popover bounds the growing tree by the viewport height left below the trigger - Parts live in separate files with no index:
CascaderItemscomes fromcascader-item, whileCascaderInputandCascaderValuecome fromcascader-nav - Give every node a
valuethat is unique across the whole tree, not only within its level; a repeatedvaluesilently drops the later row
https://reui.io/components/cascader/c-cascader-18.mdget_example("c-cascader-18")npx shadcn@latest add @reui/c-cascader-18About Shadcn Cascader Tree Multi-Select
Cascading tree multi-select inside a popover. Built by composing Button, Cascader, Cascader Item, Cascader Nav, Cascader Types. A free, open source shadcn cascader example you can install with npx shadcn@latest add @reui/c-cascader-18 and edit as your own code.
What You Can Build With Shadcn Cascader Tree Multi-Select
- Composes Button, Cascader, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-cascader-18
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Cascader Examples
- Attribute Picker Nested attribute picker with drill-down navigation.
- Multi-Select Cap Multi-select permissions with checkboxes and a selection cap.
- Deep Search Deep search across every level with path-annotated results.
- Footer Flyout Pinned footer with a side-anchored import flyout.
- Avatar Rows Custom rows with avatars and role badges.
- Path Formatting Trigger path formatting and collapsing.
- Embedded Panel Embedded panel without a popover.
- Flat Data Flat adjacency data with a parent pointer.
- Controlled State Controlled path, value, query and open state.
- Translated Labels Translated labels across a country picker.
- Two-Line Rows Two-line rows with descriptions and a disabled option.
- Native Form Field Form field that submits like a native input.
Related Shadcn Component Categories
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.
Open-source shadcn checkbox components for multi-select forms, settings preferences, and table selection.
Open-source shadcn code block components with Shiki syntax highlighting for AI chat, streaming agent output, diff review, and documentation.
Open-source shadcn collapsible components for expandable sections, detail rows, and progressive disclosure.
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.
Frequently Asked Questions
When should I use Shadcn Cascader Tree Multi-Select?
Use it for shipping zones by continent, region and country, where 1 press takes a whole region and the trigger names top picks plus a country total.
Shadcn Cascader as a whole fits:
- Form fields that commit one value from a nested tree, such as a category, region, file or department
- Picking several nodes at once, such as permissions, report columns or shipping zones with cascading checks
- Deep or large hierarchies as Miller columns, an expanding tree, an inline panel or levels fetched on demand
For permissions picked one by one under a cap, with no parent and child linking, use the Cascader Multi-Select Cap example. For a short flat list of options with no nesting, use the Select component. For a folder hierarchy browsed on the page rather than picked into a form field, use the Tree component. For a table of records whose cells are edited in place and saved together, use the Editing blocks.
How do I install Shadcn Cascader Tree Multi-Select?
Is Shadcn Cascader Tree Multi-Select free to use?
Which components does Shadcn Cascader Tree Multi-Select 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.