nano-css

Tiny 5th generation CSS-in-JS library with a modular architecture. Start with a ~0.5 Kb core, add only what you need.

v5.5.0

~0.5 KbCore Size

40+Addons

3Presets

5th GenCSS-in-JS

Tiny Core

The core is only ~0.5 Kb, compared to ~15 Kb for libraries like styled-components. Add features only as you need them through addons.

Framework Agnostic

Works with React, Preact, Vue.js, or any other virtual DOM library — or even standalone without any framework at all.

Isomorphic

Full server-side rendering support with stable class names across environments and seamless client-side re-hydration.

High Performance

Uses .insertRule() for fast style injection and caches generated styles to avoid duplicate work.

Modular Addons

Over 40 addons — from atoms and keyframes to styled components and sourcemaps. Install only what your project needs.

Auto-Prefixing

Built-in vendor prefixing, media queries, @keyframes support, and advanced nesting with the & selector.

Quick Start


import { create } from 'nano-css';
import { addon as addonRule } from 'nano-css/addon/rule';
 
const nano = create();
addonRule(nano);
 
const className = nano.rule({
  color: 'tomato',
  ':hover': {
    color: 'blue',
  },
});

npm i nano-css