Features
Built for teams that ship at scale
From solo devs to enterprise design system teams — ReframeUI grows with you.
Token system
One source of truth for every UI decision
ReframeUI uses the W3C Design Token Community Group (DTCG) format. Three tiers ensure your decisions flow from brand primitives to scoped component values. Every change publishes both a live CSS token endpoint and a versioned component package — with zero drift between design and code.
Primitives
Raw OKLCH color and spacing values
Semantic
Mapped to intent: action.primary, surface.background…
Component
Scoped overrides: button.padding, badge.radius…
Output
Live token endpoint (CSS variables + JSON) AND versioned npm component package — React, Vue, Angular, Web Components
Multi-framework
Same components, every framework
Write once, ship everywhere. ReframeUI atoms are Lit web components that automatically interop with React, Vue, Angular, and any other framework. Each framework package is fully typed and tree-shakeable.
import { ReframeButton } from '@reframeui/react';
export function MyButton() {
return (
<ReframeButton variant="primary" size="md">
Ship it ⚡
</ReframeButton>
);
}Figma plugin
Design and code stay in sync — automatically
The ReframeUI Figma plugin reads your token file and maps variables to your component library. When tokens change in code, the plugin syncs Figma. When designers update values, the diff flows back to your repo.
Figma Plugin
Token sync active