React SDK — @sorb/leaf

Leaf is the foliage rendered in your running app. Add one provider and your tokens flow through as CSS custom properties — live-swappable, no rebuild.

Install

npm install @sorb/leaf

Wrap your app

import { SorbProvider } from "@sorb/leaf";

export default function App() {
  return (
    <SorbProvider>
      <YourApp />
    </SorbProvider>
  );
}

SorbProvider injects resolved token values as CSS custom properties on your tree. Reference them the usual way, always with a fallback:

.button-primary {
  background: var(--button-primary-bg-default, #f26722);
}

Because the values are CSS variables, a token change re-skins the component without touching the component or triggering a rebuild.

Preview sessions

When the Figma plugin opens a preview session, Leaf receives the proposed values over the bridge and applies them live. Preview mode is off by default and accepts previews only from bridge origins you allowlist — a change proposed in Figma shows up in your real component, but nothing writes to your source.

Tailwind

CSS-variable tokens drop straight into a Tailwind theme — reference them as utility values:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "action-primary": "var(--color-action-primary)",
      },
    },
  },
};

Verify before merge

Once a change looks right, Sorb checks it against your live components' tier/type bindings before you merge.

Verified = checked against your live components' tier/type bindings before merge — not a visual or accessibility audit.

Next

• The bridge — the sorb dev server Leaf talks to.
• Tokens & taxonomy — how the values get resolved and bound.

Works with Figma. Not affiliated with, or endorsed by, Figma. Figma is a trademark of Figma, Inc.