Get set up
Statecraft renders your real components, so the one thing worth doing before anything else is pointing it at the library your team already ships. That takes a few minutes and an agent does most of it. Everything after that you can learn by clicking.
Open Statecraft
Download the Mac app, or open it in your browser. They are the same editor. The Mac app adds a sync folder — a local directory holding your states as real .jsx files, so Cursor, Claude Code and your own editor can work on them alongside you. See CLI & desktop app.
Bring your design system in
On your workspace's Design systems page, choose Import and pick the repository your components live in. Public repos work as-is; for private ones, install the Statecraft GitHub App first (Account → Integrations). Not on GitHub? Connect GitLab, Gitea, Bitbucket or your own server with an access token on the same page — on GitLab, a fine-grained token with just Code: Download on the projects you want is enough to import from them. There's a local-folder door too if you'd rather connect nothing at all. The whole thing also runs from the terminal — statecraft design-system import start, see the CLI page.
An agent then reads the repo and proposes a configuration: the framework, the bundle entry point, the install setup, whichever Tailwind or CSS-in-JS pipeline is in play, and a curated list of components. It builds the bundle and mounts each component to check it actually renders, so what you're reviewing has already been proven to work.
Read the proposal and correct it in plain English — "the package lives in packages/ui", "drop the Skeleton component", "add the dark theme". Each correction triggers a fresh build, so you find out immediately whether it worked. When it looks right, hit Publish and the design system is live for everyone in the workspace.
Make something with it
Hit New project. The editor opens on a blank canvas and asks which design system to build against — pick the one you just imported and the component palette fills with your real components.
From here, click around. Drag components onto the canvas, double-click into a frame to edit its elements, wire a button to another frame to make it clickable, and hit Play to walk through the result. Or skip the canvas entirely and ask the AI panel to build the screens for you.
No component library yet? Pick a starter from the gallery in the same dialog — thirty-odd real libraries, Bulma and Bootstrap among them if yours is really a CSS framework. You can always import the real thing later — projects aren't locked to the design system they were born with.
Where to go next
The rest of these docs cover the parts you can't discover by clicking:
- Design systems — the five ways a library can load, and what to do when the import agent gets it wrong.
- statecraft.yaml — the full manifest schema.
- CLI & desktop app — the sync folder, the command-line verbs, and working alongside a coding agent.
- Publish & PR previews — republish the design system from CI, and put a visual preview on every pull request.
Anything missing, mail support@statecraftapp.com.