Documentation

Solid Integration

The Solid adapter gives you generated SolidJS wrappers around the design system's web component atoms. Each component ships with a typed props interface and follows Solid's reactivity model. Works with SolidStart and plain Vite/Solid setups.

Installation

Install the design system package into your project.

Terminalbash

npm install @org/design-system

Import tokens

Import the CSS file once at your app root. It injects the token variables your components depend on. In SolidStart, the right place is entry-client.tsx or app.tsx. In a plain Vite/Solid project, use src/index.tsx.

src/index.tsxtsx

// Injects CSS custom property variables used by all components
import '@org/design-system/css';

Import and use components

Components are imported from the /solid sub-path. Names follow the ReframeXxx convention: ReframeButton, ReframeBadge, and so on. Event names follow the reframe-* convention, expressed as camelCase handler props (e.g., onReframeClick for the reframe-click event). Custom events are forwarded as handler props: onReframeClick receives a CustomEvent.

MyPage.tsxtsx

import { ReframeButton, ReframeBadge } from '@org/design-system/solid';

export default function MyPage() {
  return (
    <div>
      <ReframeBadge variant="success">Live</ReframeBadge>
      <ReframeButton
        variant="primary"
        onReframeClick={(e: CustomEvent) => console.log(e.detail)}
      >
        Deploy now
      </ReframeButton>
    </div>
  );
}

TypeScript support

Every wrapper exports a ReframeXxxProps interface. Import the props type alongside the component to get variant unions, event handler types, and compile-time checks on invalid values.

example.tsxtsx

import { ReframeButton } from '@org/design-system/solid';
import type { ReframeButtonProps } from '@org/design-system/solid';

// variant is 'primary' | 'secondary' | 'ghost' | 'danger'
const variant: ReframeButtonProps['variant'] = 'primary';

// TypeScript error — 'xl' is not a valid size
// const size: ReframeButtonProps['size'] = 'xl';

Switching modes

Set data-theme on document.documentElement to switch between light and dark. In Solid, pair a signal with createEffect to keep the attribute in sync reactively.

ThemeToggle.tsxtsx

import { createSignal, createEffect } from 'solid-js';

export default function ThemeToggle() {
  const [dark, setDark] = createSignal(false);

  createEffect(() => {
    document.documentElement.setAttribute('data-theme', dark() ? 'dark' : 'light');
  });

  return (
    <button onClick={() => setDark((d) => !d)}>
      {dark() ? 'Light mode' : 'Dark mode'}
    </button>
  );
}

Staying up to date

Run the update command to pull the latest published release. Keep the version range open in your package.json so future updates apply without a manual pin change.

Terminalbash

npm update @org/design-system

package.jsonjson

{
  "dependencies": {
    "@org/design-system": "^1.0.0"
  }
}

Next steps

Using plain HTML without a build step? See Web Components.

Web Components →

Documentation

Solid Integration

Installation

Install the design system package into your project.

Terminalbash

npm install @org/design-system

Import tokens

src/index.tsxtsx

// Injects CSS custom property variables used by all components
import '@org/design-system/css';

Import and use components

MyPage.tsxtsx

import { ReframeButton, ReframeBadge } from '@org/design-system/solid';

export default function MyPage() {
  return (
    <div>
      <ReframeBadge variant="success">Live</ReframeBadge>
      <ReframeButton
        variant="primary"
        onReframeClick={(e: CustomEvent) => console.log(e.detail)}
      >
        Deploy now
      </ReframeButton>
    </div>
  );
}

TypeScript support

Every wrapper exports a ReframeXxxProps interface. Import the props type alongside the component to get variant unions, event handler types, and compile-time checks on invalid values.

example.tsxtsx

import { ReframeButton } from '@org/design-system/solid';
import type { ReframeButtonProps } from '@org/design-system/solid';

// variant is 'primary' | 'secondary' | 'ghost' | 'danger'
const variant: ReframeButtonProps['variant'] = 'primary';

// TypeScript error — 'xl' is not a valid size
// const size: ReframeButtonProps['size'] = 'xl';

Switching modes

Set data-theme on document.documentElement to switch between light and dark. In Solid, pair a signal with createEffect to keep the attribute in sync reactively.

ThemeToggle.tsxtsx

import { createSignal, createEffect } from 'solid-js';

export default function ThemeToggle() {
  const [dark, setDark] = createSignal(false);

  createEffect(() => {
    document.documentElement.setAttribute('data-theme', dark() ? 'dark' : 'light');
  });

  return (
    <button onClick={() => setDark((d) => !d)}>
      {dark() ? 'Light mode' : 'Dark mode'}
    </button>
  );
}

Staying up to date

Run the update command to pull the latest published release. Keep the version range open in your package.json so future updates apply without a manual pin change.

Terminalbash

npm update @org/design-system

package.jsonjson

{
  "dependencies": {
    "@org/design-system": "^1.0.0"
  }
}

Next steps

Using plain HTML without a build step? See Web Components.

Web Components →