Docs / Introduction
What KATA UI is, how it is made, and where to go next.
KATA UI is a catalog of interface parts — components, assembled blocks, and whole page templates — written in plain HTML, CSS and JavaScript. You take the code: by copy-paste from any part’s page, or with the CLI. There is no framework to adopt, no build step to configure and no runtime to ship. After the copy, the code is yours; nothing updates itself and nothing phones home.
The catalog today: 96 parts, 13 blocks, 4 templates, 150 icons and 56 brand marks, 5 themes — every one free under MIT.
Every part is built to one written standard (the mold) and machine-checked against it before it ships: the same design tokens, the same spacing rhythm, the same states and focus rings, the same icon geometry. That sameness — not any single part — is the product. It is also why the parts compose: a Modal, a Command palette and a form built months apart sit together like they were made in one afternoon, because in the ways that show, they were.
The word kata is the Japanese discipline of the form: a pattern practiced until it disappears into the work.
Copy-paste from the site is the front door — every part page shows its HTML, CSS and JS with a live preview. The CLI is the same catalog from a terminal. And because AI tools increasingly write the first draft, the whole catalog is published in machine-readable forms (registry.json, llms.txt, an installable Skill) so a model can fetch real parts instead of improvising lookalikes:
node kata-ui.mjs add sidebar calendar qr-code
Start at Getting Started for the three-step version, or open Components and take what you need.
Not a framework: there is no KATA way to fetch data, route pages or manage state — your stack keeps those jobs. Not a hosted service: the site is a catalog, not a platform. And not a React library: the parts are deliberately framework-free, which is what lets them drop into Astro, Laravel, Rails, Django, WordPress or a single HTML file unchanged.
Getting Started · CLI · Theming · Dark Mode · Accessibility · Installation · Plain HTML · Astro · 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 · Registry · Forms · MCP Server · RTL · Changelog