OrgChart
A connected organization hierarchy with person cards, expandable reporting lines, and contained scrolling.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
Collapsed departments
Empty
API
8 props
Accessibility
Nested lists convey reporting relationships. Branch buttons expose expanded state, retain focus when toggled, and work with Enter or Space. The labelled scroll region is keyboard focusable. Avatars are decorative because names are visible.
Related
AreaChartFilled areas per series over categories, stacked into a total or overlapping from zero.2 examplesBarChartBars per category: single, grouped or stacked, upright or on their side, with references, annotations and a highlighted bar.2 examplesBoxPlotChartDistributions side by side: median, quartiles, whiskers at 1.5 × IQR and outliers, from raw samples or precomputed summaries.1 exampleChartFrameThe frame every chart renders in: a captioned figure with one keyboard stop and a readout, loading, empty, invalid and error states, locale-aware numbers and a data table built from points. Use it around a custom visual, with the Recharts composition parts and Gaudi primitives.1 exampleComposedChartBars, lines and areas on one category axis, with a right-hand axis for a series in other units.DonutChartParts of a whole as a donut with a centre summary, or a pie (PieChart); slices are selectable and small ones fold into Other.2 examples