Docs / Astro
Astro renders HTML and asks for nothing else. KATA parts paste into .astro files unchanged.
Run the CLI into public/ so Astro serves the files as static assets:
curl -fsSL https://kata-ui.dev/cli/kata-ui.mjs -o kata-ui.mjs node kata-ui.mjs init --dir public/kata node kata-ui.mjs add button switch card --dir public/kata
init writes tokens.css; add writes each part’s CSS and JS next to it, dependencies included.
In src/layouts/Layout.astro, load the tokens first, then the parts you use — once, for every page:
<link rel="stylesheet" href="/kata/tokens.css"> <link rel="stylesheet" href="/kata/button.css"> <link rel="stylesheet" href="/kata/switch.css">
KATA CSS is global by design, which suits Astro: load it in the layout instead of a component’s scoped style block, and every page shares the same mold.
Copy a part’s HTML into any .astro file — frontmatter expressions work inside it like anywhere else. A part’s JS is a plain script: paste it into a script tag at the end of the page, or serve the file and reference it.
No island, no hydration, no client framework. The parts were never components in the framework sense; Astro’s HTML-first model is exactly the ground they were cast for.
Getting Started · CLI · Theming · Dark Mode · Accessibility · Installation · Plain HTML · Laravel · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · FAQ · Changelog