DS
Premium Docs

Design System Showroom

Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modern
Published package
Primary
#0A0A0A
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections
212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
Foundations4 documented routes
4
Tokens
Themes
Engines
Icons
109
97
Display
Inputs
Feedback
Layout
Navigation
Overlay
21
Headers
Workspace
Record
Dashboard
Feedback
36
Admin
Data
Experience
Forms
Operations
Workspace
3
Platform
Bit Hire
Evnto
1
Playground
2
Developers
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package · Pattern Library · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#0A0A0ARottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Patterns
Visualization
Charts
Treemap

Treemap

Active profilePlatform Flagship
Runtime postureRottay / modern
D3-backed chart recipes with token-aware styling.
Runtime controls
TenantRottay
Patterns/Charts/TreeMap
Hierarchical
Runtime-driven docs

TreeMap

Nested rectangles representing hierarchical data proportions
Nested groups with values that roll up into visible totals.
How to read this page
Use the sidebar showroom controls to change engine and tenant, then judge whether the chart still reads clearly without extra editorial staging around it.
TierChartA specialized visualization pattern.
FamilyHierarchicalStart with parent-child clarity.
Best forshowing proportions within nested categoriesCompare against pie charts.
Live preview

Validate the chart in the active showroom runtime

Sidebar engine and tenant drive this
Hierarchical
This preview should stand on the chart itself: legibility, token use, spacing, and interaction rhythm all need to hold without extra local storytelling chrome.
Loading chart preview...The interactive chart canvas mounts client-side so the docs page stays stable while the preview runtime boots.
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
ImportTSX
Quick copy
import { TreeMap } from '@rottay/design-system';
UsagePaste-ready example that shows the base contract first.
tsx
10 lines
Consumption
Runtime-aware snippet
UsageTSX
Quick copy
<TreeMap
  data={[
    { name: 'Engineering', value: 45 },
    { name: 'Sales', value: 32 },
    { name: 'Design', value: 19 },
  ]}
  showLabels
  height={300}
  animate
/>
API surface

Props

6 rows
TreeMap propsProp contracts stay readable across dark-first and light-first tenants.
6 props
2 required
4 optional
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.
Name
Type
Default
Required
Description
Required
Required
Optional
Optional
Optional
Optional
Primitives97 documented routes
PatternsCurrent section
48
Data
Forms
Visualization
Calendar View
Charts
18
Kanban Board
Map View
Timeline
Tree View
Communication
Workflow
Navigation
Misc
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
EngineModern

Choose this when

1 items
showing proportions within nested categories

Review checklist

3 items
parent-child clarity
label fit
relative area reading

Compare against

2 items
pie charts
bar charts
data
HierarchyDatum[]
none
Nested input structure rendered into the hierarchy chart.
height
number
none
Canvas height for the chart.
valueKey
string
none
Field used to calculate area or weight within the hierarchy.
showLabels
boolean
true
Displays labels within chart segments when space allows.
className
string
none
Additional class names for layout or product-specific extension points.
style
CSSProperties
none
Inline overrides for one-off sizing or diagnostic rendering changes.
data
Required
HierarchyDatum[]none
Nested input structure rendered into the hierarchy chart.
height
Required
numbernone
Canvas height for the chart.
valueKey
Optional
stringnone
Field used to calculate area or weight within the hierarchy.
showLabels
Optional
booleantrue
Displays labels within chart segments when space allows.
className
Optional
stringnone
Additional class names for layout or product-specific extension points.
style
Optional
CSSPropertiesnone
Inline overrides for one-off sizing or diagnostic rendering changes.