## Org Chart (S—221)

A drill-down org chart: open a manager’s reports, see team sizes, search a name to reveal its path, step back up.

- URL: https://sundaeui.dev/components/org-chart
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/org-chart.json`
- Tags: tree, hierarchy, team, directory, org-chart, people

Starts at the top with direct reports. Tap a manager to focus them: their reports appear below and a breadcrumb shows the path back.
Search finds anyone and jumps to their manager with them highlighted. Each card shows how many people roll up to them.

### Usage

```tsx
import { OrgChart } from '@/components/sundae/org-chart'

<OrgChart />
```

### Props

- `root` (`OrgNode`, required): Nested people with reports.
- `onSelect` (`(id: string) => void`): Person chosen.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Company directories, onboarding, team pages.

### When not to use

- Very wide orgs on small screens: use a list.

### Accessibility

- People are buttons; the breadcrumb is a nav landmark with the current level marked.
- Search results are announced.
- Reduced motion removes the movement and keeps every state change.