Docs / Laravel
Blade templates are HTML with echoes — KATA parts drop in unchanged.
Run the CLI into public/ so the files are served 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 data-table --dir public/kata
init writes tokens.css; add writes each part’s CSS and JS next to it, dependencies included.
In resources/views/layouts/app.blade.php, load the tokens first, then the parts — once, for every view:
<link rel="stylesheet" href="{{ asset('kata/tokens.css') }}">
<link rel="stylesheet" href="{{ asset('kata/button.css') }}">Serve a part’s JS the same way, with the defer attribute, at the end of the layout.
Copy a part’s HTML into any Blade view. Echoes and directives work inside the markup as usual — a @foreach over your models can stamp out cards, rows and list items from a single pasted part.
If the project builds front-end assets with Vite instead, the same files can live under resources/ and be imported unchanged; they are plain CSS and JS either way.
Getting Started · CLI · Theming · Dark Mode · Accessibility · Installation · Plain HTML · Astro · 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