Point it at your repository. Pick the repository or folder that holds your component library.
Components
Design with your real components.
Import your component library once. Statecraft builds it from your repository, so props, tokens and styles match production.
Import
Bring in your library.
An agent reads your repository, works out the build and test-renders every component. Nobody redraws the library by hand, one variant at a time.
- 01
Point it at your repository.
GitHub, GitLab, Gitea, Bitbucket, a self-hosted server, or a folder on your Mac.
- 02
Let the agent work out the build.
It finds the framework, entry point, install steps and styling setup, and proves them with real builds. Tell it what it got wrong and it rebuilds.
- 03
Review and publish.
Check the component list and any that failed to render, then publish to your workspace.
An agent sets up the build. It finds the entry point, the install steps and the styling setup, and writes the configuration.
Every component checked. Each component is test-rendered before you publish, and any that fail are flagged.
Sync
Stay current from CI.
When engineers change a component, every project picks it up on its next render. Designs keep matching what shipped, and if a build fails your team keeps the last version that built.
Compatibility
Built around your frontend.
Statecraft builds your library the way your repository does, with your package manager and your styling setup.
React and Vue 3. Each project uses one framework, chosen when you create it.
Your styling. Tailwind v3 and v4, UnoCSS, Sass, CSS Modules, styled-components, Emotion, vanilla-extract and more.
Tokens and type. Tokens appear as quick picks in the inspector, and your type scale drives the text styles.
Guidelines for AI. Usage notes in statecraft.yaml go to Statecraft's assistant and to coding agents, so generated screens follow your rules.