Features
Everything your design system needs to stay alive.
One tool for the full design system workflow. Define tokens, compose components, publish to every platform, no stitching tools together.
AI import
Your existing product is already a design system. Let AI extract it.
Paste a GitHub URL or a Figma file link. ReframeUI scans your components, reads your styles, and pulls out every design decision your team has been making implicitly — inline values, scattered CSS, whatever the codebase looks like. The AI groups them into a proper token structure with semantic names, maps your components to a catalog, and shows you everything to review before a single thing changes. From there, Studio is where you refine it, extend it, and ship it to every platform.
Import from GitHub
github.com/acme/design-system
Detect
AI scans your repo or Figma file and identifies every frontend sub-project and component
Extract
Every color, spacing value, type decision, and shadow pulled from your actual code or design file
Structure
Raw values grouped into primitives, semantics inferred from how they were used, components matched to a catalog
Review and apply
You confirm, rename, and tweak before anything changes. Then it is yours to adjust in Studio.
Composable components
Pre-composable, not pre-built
Every component in ReframeUI is a set of composable blocks: slots, variants, layout, and behavior. You're not tweaking a preset. You're constructing the component that fits your brand, with the platform handling the complexity of shipping it everywhere.
Base block
The structural foundation of the component
Token layer
Brand values cascade in automatically
Slot config
Add icons, labels, prefixes — your layout, not a default
Behavior
Event handlers, state, interactions — all composable
Design tokens
Your brand decisions, captured once and applied everywhere
Set your colors, spacing, and type at the brand level. ReframeUI applies them through your entire component set automatically, from high-level intent down to individual component values. When something changes, it changes everywhere. No manual updates, no drift. For agencies: each client has their own token set, fully isolated.
Primitives
Your brand's raw values — colors, spacing, type scale
Semantic
What those values mean — primary action, background, accent, danger
Component
Scoped per component — button, badge, input, card
Output
Published everywhere your apps are built, automatically kept in sync
Multi-platform
One design system for every platform your product ships on.
Write your design system once. ReframeUI delivers it to every platform your product targets: React, Vue, Angular, iOS, Android, and more. Fully typed and ready to drop into any existing codebase. No per-platform maintenance, no duplicate component libraries.
import { ReframeButton } from '@reframeui/react';
export function MyButton() {
return (
<ReframeButton variant="primary" size="md">
Ship it ⚡
</ReframeButton>
);
}Figma sync
Designers and developers, always working from the same values
The ReframeUI Figma plugin connects your design file directly to your live design system. When values change in Studio, Figma reflects them automatically, so designers always work with the real values, not a snapshot from last month. No copy-paste, no drift. Managing multiple design systems? Each one connects to its own Figma file independently.
Figma Plugin
Token sync active
Multiple design systems
One team. Multiple design systems. Fully isolated.
Agencies, multi-brand companies, and studios can run multiple fully isolated design systems from one team. Each design system has its own token set and component package — nothing bleeds between them. Editor seats are shared across all design systems. You pay for your team once, not once per system.
Acme Corp
12 tokens · isolated workspace
Nova Health
8 tokens · isolated workspace
Bright Retail
15 tokens · isolated workspace
Editor seats
2 editors · shared across all clients
$200/month total — not $200 × 3 clients