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
Bullet

Bullet

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

BulletChart

Compact chart comparing actual value against target with range bands
A small number of measures with targets and performance bands.
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.
FamilyKPIStart with threshold contrast.
Best forshowing target vs actualCompare against gauges.
Live preview

Validate the chart in the active showroom runtime

Sidebar engine and tenant drive this
KPI
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 { BulletChart } from '@rottay/design-system';
UsagePaste-ready example that shows the base contract first.
tsx
9 lines
Consumption
Runtime-aware snippet
UsageTSX
Quick copy
<BulletChart
  data={[
    { label: 'Revenue', value: 275, target: 300, ranges: [150, 225, 300] },
    { label: 'Profit', value: 22, target: 25, ranges: [10, 18, 30] },
  ]}
  showLabels
  height={180}
  animate
/>
API surface

Props

6 rows
BulletChart 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

2 items
showing target vs actual
compressing executive snapshots

Review checklist

3 items
threshold contrast
target visibility
compact readability

Compare against

2 items
gauges
bar charts
data
KpiDatum[]
none
Metric values and targets rendered by the chart.
height
number
none
Canvas height for the compact KPI chart.
target
number
none
Single target value highlighted by the chart.
ranges
number[]
none
Threshold bands used to interpret performance.
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
KpiDatum[]none
Metric values and targets rendered by the chart.
height
Required
numbernone
Canvas height for the compact KPI chart.
target
Optional
numbernone
Single target value highlighted by the chart.
ranges
Optional
number[]none
Threshold bands used to interpret performance.
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.