Docs / Installation
Four ways in — from a single part to the whole set.
Every part is three files at most: HTML, CSS, and JS when it needs behavior. Copy them from the part’s page into your project and they are yours — no dependency to update, no version to pin. Load the design tokens once, first:
<link rel="stylesheet" href="https://kata-ui.dev/tokens.css">
Parts that build on other parts say "Uses:" on their page; include those parts’ CSS as well. That is the entire install for most pages.
To evaluate everything at once, download the full bundle — every component and block, styles and behavior:
<link rel="stylesheet" href="https://kata-ui.dev/kata-ui.css"> <script src="https://kata-ui.dev/kata-ui.js"></script>
The CSS is the tokens plus all parts in catalog order. The JS runs each part in its own scope; parts whose markup is not on the page stay inert. When you settle on the parts you use, swap the bundle for their individual files and the page gets leaner.
kata-starter.zip is a working first page — Card, Input, Switch, Button and Badge already composed — with the bundle beside it. Unzip, open index.html in a browser, and edit. No server, no build step:
https://kata-ui.dev/starter/kata-starter.zip
The README inside explains how to slim the starter down to per-part files when you are ready.
The catalog is published in machine-readable forms: registry.json in the shadcn registry format (every part and block with its files inline), llms.txt as a short index, and llms-full.txt with the full text and code.
https://kata-ui.dev/registry.json https://kata-ui.dev/llms.txt https://kata-ui.dev/llms-full.txt
Point your assistant at llms.txt and it can fetch the exact part it needs instead of inventing one.
Getting Started · Theming · Dark Mode · Accessibility · 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