Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Org chart

Who reports to whom, drawn top down with lines between managers and their teams. A team folds away behind a count, and the chart pans by dragging when it is wider than its frame.

Pro
pnpm dlx shadcn@latest add @caliper/org-chart

Forma Labs

11 people · press a card for details

  • Amara OkaforChief executive
    • Elias KimCTO
      • Aiko TanakaPlatform lead
      • Dev PatelData lead
    • Hannah BrooksCOO
      • Lena FischerFinance lead
      • Omar AzizPeople lead
      • Priya NairLegal counsel
Installs components/ui/org-chart.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

  • Team directories, approval chains and account hierarchies.
  • Onboarding: who is who.

Skip it when

  • Large organisations as a whole; show one branch at a time.
  • Process flows; use the flow diagram.

Decisions

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

Styling

Lines from borders
Connectors are each node's corner borders, so they follow any card size without measuring.

Usage

A tree to the keyboard
Down goes to the first report, Up to the manager, Left and Right along a team, Enter folds.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/org-chart

Adds its 2 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.

example.tsx
import { OrgChart } from "@/components/ui/org-chart"

The worked example comes with Pro

The 33-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

OrgChart

component
PropTypeDefault
label *string—
root *OrgNode—
defaultCollapsedreadonly string[][]
onSelect((node: OrgNode) => void)—
classNamestring—

Accessibility

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

KeyBehaviour
↓Moves to the next item or value.
↑Moves to the previous item or value.
→Moves to the next item or value.
←Moves to the previous item or value.
EnterActivates the focused control.
SpaceActivates 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.

All Table examples