Default
Design
Brief
Flows
Research
Read me
Tree
A hierarchy people expand and collapse (folders, categories). Arrow keys move and open; rows are 44px.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Tree view
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Selectable
Design
Research
Show the codeHide the code
Selectable, code
<Tree aria-label="Folders" selectionMode="single" defaultSelectedKeys={['research']} className="max-w-sm">
<TreeItem id="design" title="Design" icon={Folder} />
<TreeItem id="research" title="Research" icon={Folder} />
</Tree>Tokens
The 13 design tokens Tree reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 13 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.default | … | --sd-color-border-default |
| color.icon.default | … | --sd-color-icon-default |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| motion.duration.fast | … | --sd-motion-duration-fast |
| radius.sm | … | --sd-radius-sm |
| shape.radius-surface | … | --sd-shape-radius-surface |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/treeThen import it
import { Tree, TreeItem } from "@/components/ui/tree"Props
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | ((item: T) => ReactNode) | TreeItem elements (nest them for children), or a render function for `items`. |
When to use it
Use it for
- Nested folders, files, categories or org charts
Use something else for
- Site navigation: use Sidebar
- Two levels of FAQs: use Accordion
Accessibility
Screen readers announce "Files, tree grid" then "Design, row, expanded, level 1".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Keep labels unique within a branch
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 185 text runs: 0 below 7:1, lowest 15.48:1 |
| Target size | 36 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 6 of 6, Firefox 6 of 6, WebKit 6 of 6 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab enters the tree on the first row |
| ArrowDown | Down moves to the first child |
| ArrowDown | Down moves to the next row |
| ArrowRight | Right opens a closed branch |
| ArrowLeft | Left closes it again |
| End | End moves to the last row |
In Figma
The Figma component is Tree, with Selection (None, Single, Multiple). The Figma library isn’t published yet.
Figma to code: Selection → selectionMode (None = "none", Single = "single", Multiple = "multiple"); Items → children.