Docs / Getting Started
From zero to a working part in three steps.
Every part reads its color, spacing, radius and motion from one file. Load it once, before anything else:
<link rel="stylesheet" href="https://kata-ui.dev/tokens.css">
That file is the mold. Parts never hard-code a color, so this one link is what makes the whole catalog look like one product.
Open the part in Components and copy its three files: the HTML from the preview, the CSS, and the JS when it has one. Paste them into your project as they are. There is no install step and no package to keep updated — the code becomes yours, which is the point.
If the part says "Uses:" under its preview, it builds on another part (a Modal on Buttons, a Command palette on Kbd). Include that part’s CSS too; the page names it.
Plain HTML files, Astro, Laravel Blade, Django and Rails templates, WordPress themes. If it renders HTML, KATA parts drop in unchanged — no framework island, no build plugin, no runtime.
For AI tools and installers, the whole catalog is also published as registry.json in the shadcn registry format, and as llms.txt for models that read the web.
Theming · Dark Mode · Accessibility · Installation · 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