Patterns
Org chart
Five layouts (card, gradient, avatar, compact, list), rounded connectors, teams that fold, department colours, pan and zoom, fit, expand and collapse all.
A Wavi Pro component
The live example is open to everyone. The source comes with a Wavi Pro licence: add it with one command, or copy it below.
Drag the background to move, Ctrl/⌘ + wheel or the toolbar to zoom; the counts fold and unfold each team.
The example code comes with Wavi Pro
One payment for every Pro component, block and template, with every update.
Import#
The package for everything else, and the Pro component from where `add` puts it:
import { Badge, Segmented } from "@waveinno/ui";
import { OrgChart, type OrgChartVariant, type OrgNode } from "@/components/wavi-pro/org-chart";Props#
Read from the source of this version, so they match the code exactly.
<OrgChart>
pro/org-chart.tsx| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | OrgNode | — | |
variant | "card" | "gradient" | "avatar" | "compact" | "list" | "card" | |
departments | Record<string, string> | — | Department → colour. Departments not listed get one from a palette. |
defaultCollapsed | string[] | — | Ids folded at first. Or `collapseDepth` folds everything below a depth. |
collapseDepth | number | — | |
selected | string | — | |
onSelect | (node: OrgNode) => void | — | |
height | number | 520 | Height of the chart box (not used by `list`). |
className | string | — |
<Badge>
src/components/ui/badge.tsx| Prop | Type | Default | Description |
|---|---|---|---|
dot | boolean | true | |
variant | "soft" | "solid" | "outline" | "dot" | "gradient" | "live" | "soft" |
Also takes HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>.
<Segmented>
src/components/ui/segmented.tsx| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | T | — | |
onChangerequired | (v: T) => void | — | |
optionsrequired | SegmentedOption<T>[] | — | |
className | string | — | |
ariaLabel | string | — | |
variant | keyof typeof TRACK | "pill" | |
size | keyof typeof SIZES | "sm" | |
fullWidth | boolean | false | Stretch to the container, options sharing the width equally. |
Add it to your project#
With your licence key, this writes the component to components/wavi-pro/ and installs anything it needs:
$ npx @waveinno/ui add org-chart --key <your licence key>Source#
Or copy the file yourself. It imports only from @waveinno/ui, lucide-react and React (and Radix where noted).
The source comes with Wavi Pro
One payment for every Pro component, block and template, with every update.
Install#
If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.
$ npm install @waveinno/ui