Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
Primitives
  • Accordion
  • Alert
  • Alert dialog
  • Aspect ratio
  • Autocomplete
  • Avatar
  • Badge
  • Button
  • Button group
  • Calendar
  • Card
  • Checkbox
  • Checkbox Group
  • Code
  • Code Diff
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Date Picker
  • Dialog
  • Drawer
  • Empty
  • Field
  • Form
  • Gradient Editor
  • Hover card
  • Input
  • Input group
  • Input OTP
  • Item
  • Kbd
  • Markdown
  • Menu
  • Menubar
  • Meter
  • Native select
  • Navigation menu
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio group
  • Resizable
  • Scroll area
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Table of contents
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toolbar
  • Tooltip
  • Tree
  • Trigger Menu
  • Typography
Hooks
  • Use Chat Message
  • Use Chat Input
  • Use User Ask
  • Use Audio Recorder
  • Use Environment Variables
  • Use Copy To Clipboard
  • Use Tool Call
  • Use Sidebar Resize
Utils
  • cn
  • Skin
  • Contracts
  • Serialize
Extensions
  • Control Effects
  • View Transition
  • Send Aurora
  1. Primitives
  2. Tree
Primitives

Tree

Accessible tree view with roving keyboard navigation, single/multi selection, and animated disclosure.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Branching tree

TreeItem owns each row; nested TreeItemContent contains child items.

Tree
├── TreeItem
│ ├── TreeItemTrigger
│ │ ├── TreeItemIndicator
│ │ └── TreeItemLabel
│ └── TreeItemContent
│ └── TreeItem
└── TreeItem

The refined source installs this primitive from src/registry/sources/refined/ui/tree.tsx. Install it on its own with the command above, or inspect the source below.

Registry command
npx shadcn@latest add http://127.0.0.1:3000/r/refined/tree.json
See registry manifest

Raw code

Primary installed primitive source

Tree slot
src/registry/sources/refined/ui/tree.tsx

On this page

  • Preview
  • Composition
  • Installation
  • Source
  • src
    • app.tsx
    • lib
      • cn.ts
      • format.ts
  • README.md