All blueprints

Airframe blueprint · CSS classes and plain HTML

New v0.3.1 on npm

The structure your framework is missing.

One stylesheet, no runtime. Your framework provides the engine. Airframe provides the structure — the same classes in React, Vue, Angular or a static file.

Get started Browse patterns

Works in

Why Airframe

Primitives that outlive your stack

No runtime

Classes on markup. No provider, no hydration, nothing to ship at runtime.

Accessible defaults

Focus rings, contrast and hit areas come from the tokens, not from a checklist.

Themed by tokens

Override a handful of custom properties and every pattern follows.

Packages

MIT licensed. Use as much as you need.

Core

@airframeui/core

Free

  • Layouts, patterns, utilities
  • One stylesheet, no compiler
  • CDN or npm
Install

Tokens

Source of truth
@airframeui/tokens

Free

  • CSS custom properties
  • JSON and TypeScript from that CSS
  • Light, dark, high-contrast
Read the spec

Theme

Studio and CLI

Free

  • Override --af-* in CSS
  • Theme Studio playground
  • Figma pack from git
Open Theme Studio

Customers

What teams say after a week

We deleted 4,000 lines of utility classes and the design got more consistent, not less. The markup finally reads like the UI.
A. Rivera Platform lead
Two frameworks, one stylesheet. Our Angular admin and our React marketing site finally look like the same product.
J. Tanaka Design systems engineer

FAQ

Common questions

Do I need a build step?

No. Import one stylesheet from npm or a CDN and start writing classes. There is no compiler, no config file and no purge step.

Which frameworks does it support?

All of them. Airframe is CSS plus markup conventions, so the same class strings work in React, Vue, Angular, Svelte, Rails or a static HTML file. React uses className instead of class.

Do I need Tailwind or an icon library?

Neither. This page uses only Airframe classes and plain HTML, so pasted markup renders the same without adding a single dependency.

How much does it cost?

Nothing. Airframe is MIT licensed. npm i @airframeui/core and you are done.

Build the thing. Ship the thing.

One stylesheet, every framework, nothing to configure. Start with the install and add patterns as you need them.

Get started Read the docs