Documentation

CLI Reference

The reframe CLI is for platform engineers who want local hot-reload iteration or custom CI publish pipelines. Most teams only need reframe login and reframe dev . Merging to main in Studio triggers an automatic publish without any CLI step.

Terminalbash

npm install -g @reframeui/cli

Authenticate with your ReframeUI account. Opens a browser OAuth flow and stores the token in ~/.reframe/credentials.

Terminalbash

reframe login

reframe whoami

Prints the currently authenticated account. Useful in CI to confirm the correct token is active before running a publish step.

Terminalbash

reframe whoami
# → Authenticated as: jane@acme.com (acme / design-system)

reframe link

Link your consuming app to a published design system package. Creates a .reframerc.json file with the linked package name and version bump strategy.

Terminalbash

reframe link @org/design-system

The generated .reframerc.json:

.reframerc.jsonjson

{
  "package": "@org/design-system",
  "bump": "patch"
}

reframe dev

Starts a local hot-reload proxy on http://localhost:4242. Watches your token overrides and component customizations. Changes reflect in the Studio preview instantly.

Terminalbash

reframe dev

Example output:

Terminal outputbash

$ reframe dev
  ✔  Linked to @acme/design-system (main)
  ✔  Token endpoint: http://localhost:4242/tokens.css
  ✔  Component bundle: http://localhost:4242/design-system.js
  ⚡  Watching for changes…

reframe build

Generates a static output snapshot of your design system (CSS + component bundle) in ./dist/. Use for self-hosting or offline environments.

Terminalbash

reframe build

# Output:
dist/
  tokens.css
  design-system.js
  design-system.d.ts

reframe publish

Publishes a new version from CI. Requires the REFRAME_TOKEN environment variable (generate in Studio under Settings → API tokens). Reads the version bump strategy from .reframerc.json unless overridden with --bump.

Terminalbash

# Publish a patch release
reframe publish --bump patch

# Publish using the bump strategy in .reframerc.json
reframe publish

Example GitHub Actions workflow:

.github/workflows/publish.ymlyaml

name: Publish design system

on:
  push:
    branches: [main]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install reframe
        run: npm install -g @reframeui/cli

      - name: Publish design system
        run: reframe publish --bump patch
        env:
          REFRAME_TOKEN: ${{ secrets.REFRAME_TOKEN }}

Next steps

Learn how to sync your tokens with Figma.

Figma Plugin →