Framework guides

keel is one stylesheet and semantic HTML — no build step, no runtime, no framework coupling. So every guide below is really the same idea: get keel's CSS into your project and link it once. After that, you write the same keel markup everywhere.

The three ways to get the file

Pick whichever suits your stack; the framework guides further down use these.

Download keel.css (and optionally keel-icons.css and a path) and drop it in your project. Works today, anywhere.
Bundle it — put the file in your app and import it, so your bundler ships it.
CDN / npm — once keel is published to npm, npm i keelcss and the jsDelivr CDN light up (cdn.jsdelivr.net/npm/keelcss/css/keel.css). Coming.

One rule holds in every stack: order is keel, then icons, then a path. And a design-system tokens block (exported from the design page) goes after the keel link — anywhere your stack lets you add global CSS.

Plain HTML

The baseline. Put the file next to your HTML and link it in <head>.

<link rel="stylesheet" href="keel.css">
<!-- optional -->
<link rel="stylesheet" href="keel-icons.css">
<link rel="stylesheet" href="keel-path-clay.css">

Astro

A natural fit — Astro ships zero JS by default, like keel. Import the CSS once in your base layout.

---
// src/layouts/Base.astro
import "../styles/keel.css";
import "../styles/keel-icons.css"; // optional
---
<html lang="en">
  <head><slot name="head" /></head>
  <body><slot /></body>
</html>

Vite · React · Vue · Svelte

Any bundler-based app: put the CSS in your project and import it once at the entry (or root component). Use the classes with className (React) or class (everywhere else).

// main.jsx / main.ts / main.js — the app entry
import "./keel.css";
import "./keel-icons.css"; // optional

// then in a component:
<a className="k-btn" href="#">A button</a>

keel's interactive components are native (<dialog>, popover, <details>), so they work in any framework with no extra library.

Next.js · Nuxt · SvelteKit

Import keel in the root layout so it loads on every route.

// Next.js app router — app/layout.tsx
import "./keel.css";

export default function RootLayout({ children }) {
  return <html lang="en"><body>{children}</body></html>;
}

11ty · Hugo · Jekyll

Static generators: copy the CSS into your output/static folder and link it in your base template. keel's base layer styles Markdown-rendered HTML with no classes — ideal for docs and blogs.

<!-- _includes/base.html (or layouts/_default/baseof.html) -->
<link rel="stylesheet" href="/css/keel.css">

WordPress

Drop the file into your theme and enqueue it. Best on block themes and hand-built templates, where you control the markup.

// functions.php
add_action("wp_enqueue_scripts", function () {
  wp_enqueue_style("keel", get_theme_file_uri("/assets/keel.css"));
  // optional, loaded after keel:
  wp_enqueue_style("keel-icons", get_theme_file_uri("/assets/keel-icons.css"), ["keel"]);
});

Page builders

A visual page builder is itself a component system with its own markup and styles, so the way to use keel here is its tokens, not its classes. Design your system on the design page, then paste the values into the builder's own global color and font settings — the five colors (primary, secondary, accent, text, background) map straight across. Because every keel rule lives in @layer, linking keel.css alongside a builder never overrides it — keel layers underneath your builder and theme, so it's always safe to add.

keel's component classes do their best work wherever you write the markup — a custom block, an HTML element, a theme template. Builders that emit clean, semantic HTML fit keel most naturally; the more a builder wraps everything in its own classes, the more you'll reach for keel's tokens over its classes.

Pasting keel markup into a raw HTML or code block and want its classes to take hold over the surrounding styles? Link the unlayered keel-portable.css build instead of keel.css. It's the same framework with the cascade layers removed, so its classes compete on normal specificity — and it adds no !important, so the builder's own inline edits still win on top of it. Everywhere else, keep the layered keel.css: it's the safe default that never touches your other styles.

<!-- inside a raw HTML / code block -->
<link rel="stylesheet" href="/path/to/keel-portable.css">
<button class="k-btn">Styled by keel, even here</button>

Rails · Laravel · Django · any server framework

Server-rendered HTML is keel's home turf. Put the CSS in your public/static assets and link it in your layout.

<!-- your app layout -->
<link rel="stylesheet" href="/assets/keel.css">

Icons and a path, in any stack

Same everywhere: link (or import) them after keel. Order is the whole trick.

keel.css          →  the framework
keel-icons.css    →  the named icon set (optional)
keel-path-*.css   →  one design direction (optional)

Build the exact set on the Compose your setup picker, and read Add a path for the direction files.

Your design system, in any stack

Generate a token set on the design page, copy the @layer tokens block, and paste it anywhere your stack loads global CSS — a stylesheet imported after keel, or a <style> in your layout head. It overrides keel's defaults cleanly because it lives in the tokens layer.

<link rel="stylesheet" href="keel.css">
<style>
  /* pasted from the design page */
  @layer tokens { :root { --k-accent: hsl(160 84% 32%); } }
</style>

Prefer the terminal?

The repo ships a zero-dependency CLI (tools/cli.mjs): node tools/cli.mjs init scaffolds keel and a starter page. And the keel MCP server lets an AI agent add keel to whatever you're building — generate a system, add icons, apply a path, and drop in sections, hands-off.