Design System
No recharts. No shadcn. No shadows. Built for 60fps.
A zero-dependency design system for React. Built for performance analytics with warm neutral tokens, carefully calibrated proportions, and 60fps chart rendering.
134 UI components · 46 chart primitives · 732 icons × 11 variants (2,865 components)
Live · 180 points · 60fps
Two-series line chart with synchronized crosshair
Series A
Series B
Hover anywhere to scrub — tooltip, crosshair and value tracking run outside React.
ActiveDefaultWarning
Quick start
import { Button, Badge } from '@ramtt/ui'
import { IconHeart } from '@ramtt/icons/line'
<Badge color="positive">Active</Badge>
<Button variant="primary">
<IconHeart size={14} />
Follow
</Button>
Rendered output
Active
This Badge + Button are rendered by the same
@ramtt/ui + @ramtt/icons imports shown on the left — no extra setup.@ramtt/ui
v0.1.0-beta.1134 components
@ramtt/charts
v0.1.0-beta.146 SVG chart primitives
@ramtt/icons
v0.2.0-beta.1732 icons × 11 variants
Principles
Monochrome UI
Color is reserved for data. UI chrome uses the warm neutral scale.
Single font
Satoshi for everything — body, labels, numbers. Weight communicates hierarchy.
0.5px borders
Hairline borders everywhere. No decorative shadows.
Flat and calm
No gradients, no shadows, no visual noise. Cards separate by border only.
cursor: default
The interface is calm, not clickbaity.
Surfaces
Beyond the API reference, every visual layer of the system has its own playground. Use these for design review, copy reference, and visual sanity checks.
Charts
Chart showcase
All 46 chart primitives with realistic data
Line deep-dive
Zoom, sync, brush, zones
Area deep-dive
Stacked, anomaly, gradients
Bar deep-dive
Grouped, stacked, PnL
Pie / donut deep-dive
Donut, sunburst, radial
Radar deep-dive
Single and multi-series
Treemap deep-dive
Pro treemap, tooltips
Tooltip deep-dive
Crosshair, value tracker
Chart test bench
Interactive dev surface