Getting started

ReframeUI is a multi-framework design system built on the W3C DTCG token format. Install the package for your framework and you're ready to go.

Installation

Install the package for your framework via your package manager:

Terminalbash

# React
npm install @reframeui/react @reframeui/atoms

# Vue
npm install @reframeui/vue @reframeui/atoms

# Angular
npm install @reframeui/angular @reframeui/atoms

Tokens

Inject the ReframeUI CSS custom properties into your app's root:

layout.tsxtsx

import { cssVariables } from '@reframeui/atoms/tokens';
import { TokenStyleInjector } from '@reframeui/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <TokenStyleInjector css={cssVariables} />
      </head>
      <body>{children}</body>
    </html>
  );
}

Components

React

App.tsxtsx

import { ReframeButton, ReframeBadge } from '@reframeui/react';

export function App() {
  return (
    <div>
      <ReframeBadge variant="success">Active</ReframeBadge>
      <ReframeButton variant="primary" size="md">
        Click me
      </ReframeButton>
    </div>
  );
}

Vue

App.vuevue

<template>
  <reframe-badge variant="success">Active</reframe-badge>
  <reframe-button variant="primary" size="md">Click me</reframe-button>
</template>

<script setup>
import '@reframeui/atoms';
</script>

Angular

app.module.tsts

import { NgModule } from '@angular/core';
import { ReframeButtonModule, ReframeBadgeModule } from '@reframeui/angular';

@NgModule({
  imports: [ReframeButtonModule, ReframeBadgeModule],
})
export class AppModule {}

Theming

Override any token by injecting a CSS block after the base cssVariables:

theme.csscss

:root {
  /* Electric orange primary */
  --reframe-action-primary: oklch(0.70 0.20 50 / 1);
  --reframe-action-primary-hover: oklch(0.62 0.22 50 / 1);

  /* Larger radius */
  --reframe-radius-md: 14px;
}

Figma Plugin

The Figma plugin is available in the Figma Community. Install it, connect your repository, and tokens will sync automatically on every commit.