Quickstart

Install

1. Get the design-system repo and open it.
2. Install dependencies with pnpm.
3. Build the tokens so the component artifacts have brand values to consume.

pnpm install
pnpm build:tokens

See what ships today

You get 45 component contracts out of the box. Most ship across React, Flutter and Lit; each contract below shows its current target coverage. Browse them in the catalogs to see every variant and state.

See Build with components for the full list and how to add your own.

Render a component on the web

Import the component from the React package and drop it into your app. It already carries your brand because it reads the tokens you built.

import { Button } from "@wyrd-company/react";

export function Example() {
  return <Button>Get started</Button>;
}

Render the same component on Flutter

The matching Flutter widget takes the same shape, generated from the same contract — so the two stay in step.

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdButton(
  child: Text('Get started'),
)

Next

• Make it yours — Define your brand.
• Add a component of your own — Build with components.
• Give it state and motion — Bring it to life.