v1.0 stable · ready for production →

Production UI, tiny CSS, every framework.

A modern CSS framework built on cascade layers, OKLCH tokens, container queries, and the popover API. Zero build step. Zero runtime dependencies. Zero JavaScript needed for most components.

Get started Browse components

npm install blastcss

app.blast.css

Live

Active deployments 3

AC web-prod · main

Healthy

Edge Postgres Redis

Bundle 11.7 KB

Components 40+

Build step None

theme.css

:root {
  --b-primary-h: 200;
  --b-radius: .375rem;
  --b-control: 2.75rem;
}

Works with

React Vue Svelte Astro Solid Angular Rails Laravel Django

~12 KB Full bundle gzipped — about 2.4× smaller than Bootstrap

0 deps No PostCSS, no Sass, no JavaScript framework

40+ Production components, all keyboard- and screen-reader-tested

100% Native HTML & CSS standards. Nothing proprietary.

Built on web standards, not abstractions

Modern CSS, today. Without compilers.

BlastCSS leans on the platform: cascade layers for predictable specificity, OKLCH for accurate colors, light-dark() for effortless theming, container queries for truly modular components, and the popover & anchor positioning APIs for primitives that used to need JavaScript.

Cascade layers

Tokens, reset, base, layout, forms, components, and utilities each live in a named layer. Override anything from app code without specificity wars.

OKLCH design tokens

A perceptually uniform palette with light-dark() swaps. Set a custom hue and the whole theme retunes — soft, strong, hover, ring, all in lockstep.

Container queries

Components respond to their own size, not the viewport. Drop a card into a sidebar or a hero and it adapts without breakpoint gymnastics.

Native popover & dialog

Dropdowns, popovers, command palettes, and modals built on the HTML popover attribute and <dialog> element with @starting-style animations.

View Transitions

Cross-document and same-document view transitions out of the box. Use view-transition-name utilities and a single API call to animate route changes.

Accessible by default

Focus rings, reduced-motion, semantic HTML, ARIA on every interactive component, and Axe checks gated in CI on five browser profiles.

One import, a complete UI vocabulary.

Pick the bundle that fits — full, layered, or per-section. Tree-shake what you don't need. Tokens travel as JSON, CSS, or TypeScript for design pipelines.

live preview

HealthPassing

Chromium Firefox WebKit

Bundle size 11.7 ↓ 24% vs Bootstrap

Components 40+ CSS-first

Monthly Yearly Lifetime

Install

npm install blastcss

Use

import "blastcss";
import { autoInit } from "blastcss/js";

autoInit();

Theme

:root {
  --b-primary-h: 200;
  --b-radius: .375rem;
}

How it stacks up.

The smallest framework that still ships ready-to-use components, with the lowest learning curve and the fewest decisions to defer.

Feature	BlastCSS	Tailwind	Bootstrap	Pico
Full bundle (gzip)	~12 KB	~10–45 KB*	~28 KB	~7 KB
Build step required	No	Yes	No	No
Pre-built components	40+	0 (utility-only)	40+	~12
OKLCH tokens	Yes	Yes (v4+)	No	No
Cascade layers	Yes	Yes (v4+)	No	No
Container queries	Yes	Yes	No	No
Popover API	Yes	No	No	No
View Transitions	Yes	No	No	No

* depending on JIT output and components used

Ship modern UI. Today.

Production-ready CSS with the smallest API surface in its class. Open the playground to fork the theme, or jump into installation.

Install BlastCSS Try the playground