Showcase

No mockups. Every page below is assembled from the catalog itself — the same parts, blocks and tokens the copy button hands you — and rendered live. Take any of them apart to see.

This site

kata-ui.dev itself

The landing page's showcase and collage are not screenshots: the dashboard in the hero window, the stat cards and the charts are live parts running on the page.

See it on the home page →
Starter kit

The starter project

Tokens, the one-file bundle and a first page, zipped. The fastest honest test of the mold: unzip, open, and everything on screen is a part.

Download the starter →
Template — live page

Blog Article

A long-form article page: standfirst, prose rhythm, a contents rail, and the author card that earns the follow.

Open the live page →
Template — live page

Checkout

A complete checkout page: steps, shipping and payment forms, and a sticky order summary that keeps the total honest.

Open the live page →
Template — live page

Dashboard

A product dashboard page: app sidebar with grouped navigation, a four-stat row, a revenue line chart and a sortable orders table — a whole screen composed from KATA parts.

Open the live page →
Template — live page

Inbox

A mail client page in three panes: folders and labels, a message list with unread states, and a reading pane with a reply box — composed from KATA parts.

Open the live page →
Template — live page

Landing Page

A product landing page assembled entirely from blocks: site header, an aurora hero, logo cloud, testimonials, pricing with its billing toggle, FAQ, a call-to-action band and the site footer.

Open the live page →
Template — live page

Product Page

A storefront product page: gallery, options, quantity, purchase actions and the accordions that answer the last questions.

Open the live page →
Template — live page

Settings

An account settings page: a section rail, a profile form with photo, notification switches, a language select and a danger zone — composed from form parts.

Open the live page →

Building something with KATA? The maker reads every issue on the repository — a link there is how a project joins this page.

KATA UI (working title) — a store of UI parts & code. Every part runs on vanilla HTML, CSS & JS