Pro

Tree select

Choose many things from a hierarchy in a field. Ticking a group ticks everything under it, a partly chosen group shows a dash, and the field shows as few chips as it can, so a whole department is one chip.

Pro

pnpm dlx shadcn@latest add @caliper/tree-select

Share Revenue dashboard

Teams get view access; owners can change it.

4 teams can see this dashboard.

Installs components/ui/tree-select.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

Sharing with teams in departments, targeting regions in countries, filtering by folders.
Permissions and audiences.

Skip it when

Flat lists; use multi-select.
Choosing one item at the end of a path; use the cascader.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Tree keys: Up and Down move, Right opens, Left closes or goes to the parent, Space ticks.
Search keeps the path: A match keeps every group above it open, so people see where it lives.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/tree-select

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from TreeSelect and summarise.

example.tsx

import { TreeSelect, summarise } from "@/components/ui/tree-select"

The worked example comes with Pro

The 31-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

TreeSelect

component

PropTypeDefaultDescription

label *string—

options *readonly TreeOption[]—

value *readonly string[]—Chosen leaf ids.

onValueChange *(value: string[]) => void—

placeholderstring"Choose"

classNamestring—

summarise

component

No props of its own; it accepts the native props of its root element.

It exposes treeitem, group and tree semantics, with aria-selected, aria-level, aria-checked, aria-expanded, aria-label and aria-multiselectable kept in step with state.

KeyBehaviour

↓Moves to the next item or value.

↑Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

→Moves to the next item or value.

←Moves to the previous item or value.

SpaceActivates the focused control.

EnterActivates the focused control.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.