Build better UIs
faster.
ReframeUI is a full design system customization platform. Define your token layer, customize component structure and behavior, then publish a live token endpoint and a versioned component package — for React, Vue, Angular, and Web Components.
import { ReframeButton } from '@reframeui/react';
// Works in React, Vue, Angular & Web Components
<ReframeButton variant="primary">
Ship it ⚡
</ReframeButton>Features
Everything your design system needs
From token layer to component code — ReframeUI gives you a complete design system platform without the boilerplate.
DTCG Token System
W3C Design Token Community Group format with 3-tier resolution: primitives → semantic → component.
React Ready
Auto-generated React wrappers for every atom. Full TypeScript types included.
Framework Agnostic
Lit-powered web components work in React, Vue, Angular, Svelte — or vanilla JS.
Figma Plugin
Sync your design tokens directly from Figma. No manual copy-paste — changes flow automatically.
Component & Token Publishing
Every published system ships both a live token endpoint (CSS variables) and a versioned npm component package — React, Vue, Angular, or Web Components. One publish, two outputs.
Type-safe Tokens
TypeScript type inference for every token key. Your IDE autocompletes the entire token tree.
Interactive demo
Tokens update everything, instantly
Drag the sliders and watch your UI respond in real time.
Token overrides
In production, these map to --reframe-action-primary, --reframe-radius-md, and --reframe-color-surface-background.
Component preview
Tokens cascade everywhere
3-tier
Token system
4
Frameworks
Live
Token endpoint
npm
Component package
“ReframeUI cut our design system migration time in half. One token, every framework — it just works.”
Sarah K.
Lead Design Engineer, Fintech startup
“The type-safe token system is a game-changer. No more guessing — your IDE tells you exactly what tokens exist.”
Marco R.
Staff Frontend Engineer
“We ship to React, Vue, and mobile web from one source of truth. ReframeUI made that possible without rewriting anything.”
Lena T.
Principal Engineer, Platform team
Pricing
Simple, transparent pricing
Free
forever
Solo use. No credit card required.
- 1 editor seat
- Full token + component editor
- Live token endpoint
- Web export only (React, Vue, Angular, Svelte, Solid.js)
- Main branch only
Team
per editor seat / month
Team collaboration, branching, all platforms.
- Editor seats — $100/seat/month
- Consumer seats — $2.50/seat/month
- Unlimited preview branches
- All web platforms + native adapters
- Versioned npm component package
Agency
per client workspace / month
Multiple isolated client design systems.
- Everything in Team
- Editor seats shared across all clients
- Consumer seats per client (optional)
- Isolated token endpoint per client
- White-label ready
Free plan. Always. Full pricing details and savings calculator →
Start building with ReframeUI today
Free forever. No credit card required. Add your team when you're ready.