Quick start

The shortest path from an empty project to an installed component library. This is the shape of the workflow — each step links to the concept behind it.

#The workflow

1. Create a project and choose its targets. A project declares which outputs it produces — React today, with Figma as a design target. See Targets.
2. Author your foundations. Define the design tokens — color, spacing, type, radius, motion — that every component and every output will draw from. See Foundations.
3. Compose components. Build components from neutral nodes, give them a props contract, and wire interactive behavior. See Components and Behaviors.
4. Generate. A generator turns the IR into real code — self-contained React components plus a shared theme. See Generators.
5. Release. Assemble the generated library into a versioned package and publish it to your registry. See Release & registry.
6. Install and use it in your app, like any other dependency.

#Installing a released library

Consumers don't need Milda — they install the generated package from your registry and import components like any library. Point the package scope at your registry, then install:

# .npmrc — route only your scope to the private registry
@your-scope:registry=https://registry.your-company.com

# then install the released design system
npm install @your-scope/design-system

And use it:

import { Button } from '@your-scope/design-system'

export function Example() {
  return <Button variant="primary">Ship it</Button>
}

#Try it without installing anything

The fastest way to get a feel for Milda is right here. The Foundations editor and editor runtime pages embed the real Studio components — interactive, no setup.