Klayd documentation
From visual system to production code.
Learn how Klayd turns component documents and Design DNA into reviewed, versionable UI packages for your framework.
Start with the workflowCreate a project, refine components, review changes, and export a package.Build your Design DNAUnderstand palettes, typography, radii, interaction tokens, and dark mode.Ship framework codeInspect the generated package contract, CI files, and delivery workflow.Check compatibilitySee which component families are production-ready across every exporter.Connect developer toolsUse project tokens with the CLI, IDE tasks, CI, and coding agents.
Supported frameworks
Every export is generated as a typed, standalone package with its own toolchain.
ReactReact 19 with Vite library mode
src/components/ComponentName.tsxVueVue 3.5 with the Vite Vue pluginsrc/components/ComponentName.vueAngularAngular 19 with standalone typed componentssrc/app/ComponentName.component.tsSolidSolid 1.9 with Vite library modesrc/components/ComponentName.tsxSvelteSvelte 5 with the Vite Svelte pluginsrc/components/ComponentName.svelteQwikQwik 1.11 with resumable library outputsrc/components/ComponentName.tsxDocumentation follows the product.
Framework names and component compatibility on these pages are sourced from the same registries used by Klayd's export validation.