Bare HTML, quietly tasteful.
A class-light CSS framework for semantic HTML. Bare tags look great with no
classes; a small data-* vocabulary adds variants; a data-theme container
re-lights the whole page — shadows and all — from ~20 tokens.
Minimalistic. Tasteful. Snappy.
Developers — increasingly AI coding agents at the keyboard — need UI that looks good without styling work. Models write excellent semantic HTML but freestyle inconsistent utility classes, and every result looks like the same AI slop. Classless frameworks (Pico, Water) are too minimal to build real UIs; class-heavy ones (Bootstrap, DaisyUI) trade away the semantic-HTML identity.
Hikari makes bare semantic HTML genuinely tasteful by default, themes beautifully from a tiny token set, and ships an agent-adoption layer so an agent told to "use Hikari" inherits taste instead of freestyling.
One <link> is the whole install:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hikariui/dist/hikari.min.css">
<script src="https://cdn.jsdelivr.net/npm/hikariui/dist/hikari.js" defer></script>Or via npm:
npm install hikariuiimport "hikariui"; // hikari.css
import "hikariui/js"; // optional progressive enhancementThen just write HTML — no classes:
<button>Just works</button>
<button data-variant="solid">Primary</button>
<article>
<h3>A card</h3>
<p>Bare <article> — a quiet surface with a hairline.</p>
</article>- Class-light. Bare semantic tags are styled by default. Variants come from
native attributes and a small
data-*vocabulary — never utility classes. - ~20 tokens are a theme. Tier-1 is a hard-capped set of tokens that are a
theme (
--bg --fg --surface --accent --accent-content --radius --space …). Tier-2 (spacing scale, radius scale, shadows, tints) derives from Tier-1 via OKLCHcolor-mix()— you never touch it. Switch the accent and the shadows re-tint for free. data-themeswaps everything. Set it on any container; themes nest. Dark mode is automatic from the OS, overridable per-region.- Your overrides always win. Everything is wrapped in
@layer hikari, so any unlayered CSS you write beats it — no!importantneeded.
Buttons · card (<article>) · badge · chip · alert · toast · tabs · accordion
(<details>) · dialog (native <dialog>) · dropdown (native popover) · tooltip
· styled forms with native :user-invalid validation. Every one is bare
semantic HTML plus, at most, one data-* hook. See the full
vocabulary.
The one variant grammar, everywhere:
<span data-badge data-variant="success">Passing</span>
<div role="alert" data-variant="danger">Something failed</div>
<button data-variant="danger solid">Delete</button>data-variant="<tone> [solid]", tone ∈ accent success warning danger.
Ships light and dark; opt into more with one extra <link> and data-theme:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hikariui/dist/themes/nord.min.css">
<body data-theme="nord">…</body>Included: nord, dracula, catppuccin. A theme is ~13 colour tokens
and nothing else; every accent/success/warning/danger pairs with a
readable -content token, gated at 4.5:1 contrast by bun run check.
Point your agent at the canonical rules and it writes tasteful Hikari markup instead of utility-class slop. Install the Claude Code Skill:
curl -fsSL https://raw.githubusercontent.com/pghqdev/HikariUI/main/skills.sh | shAll three surfaces derive from one source (rules/hikari-rules.md):
- Skill —
skills.shabove (add-s -- --globalfor user scope). AGENTS.md— drop into a consuming repo as project rules.llms.txt— served at the docs domain root for doc-fetchers.
Modern evergreen browsers. Hikari uses OKLCH, color-mix(), @layer, :has(),
native popover and <dialog> — no legacy fallbacks, by design.
bun install
bun run build # bundle CSS + themes, generate agent surfaces (Lightning CSS)
bun run check # contrast gate: every tone/-content pair ≥ 4.5:1, every themeThe framework is authored in plain modern CSS partials under src/; Lightning
CSS is the only build dependency and the shipped artifact is runtime-dependency-free.
The docs site lives in site/ (Astro).
No utility classes. No JS framework. No build step for you. It styles pages you own and yields to any pre-existing site CSS — that's the trade for zero-config taste, not an oversight.
MIT