Skip to content
KlaydDocumentation

Klayd documentation

A shared language for your UI.

Design your components, bring them together with a theme, and review the details before exporting code. This is your guide to the Klayd workflow.

Find your starting point

Use the local React packageExplore Accordion composition, imports, and the migration status of @klayd/react.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.

How it fits together

  1. Define the foundation

    Your Design DNA holds shared colors, typography, and visual decisions. Start here to keep the kit consistent.

  2. Refine and review

    Edit component states on the canvas. Use Visual Review to inspect interactions, viewport sizes, and light and dark themes.

  3. Check the handoff

    Review framework compatibility before exporting. Test the generated package in your application before shipping it.

Preview examples and exported code serve different purposes.

Visual Review examples demonstrate interactions using shared preview components. For the files and APIs delivered to your application, follow the export guide for your framework.

Supported frameworks

Every export is generated as a typed, standalone package with its own toolchain.

ReactReact 19 with Vite library modesrc/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.tsx
Documentation follows the product.

Framework names and component compatibility on these pages are sourced from the same registries used by Klayd's export validation.