NibCSS

Installation

Which NibCSS package you need for your stack, how to install it, and what it requires.

2 min readv1

NibCSS is split into small packages so you install only what your stack uses. All of them share one engine (@nibcss/core) and one config file (nibcss.config.ts), so output is identical everywhere.

Which package do I need?#

You want to…

Install

Add a <script> to an HTML page

@nibcss/runtime (from a CDN)

Use Vite, SvelteKit, Astro, Solid, Qwik, Remix

@nibcss/unplugin + @nibcss/runtime

Use Next.js

@nibcss/next + @nibcss/runtime (+ @nibcss/react for dynamic values)

Use Nuxt 3

@nibcss/nuxt

Use React hooks (useNib, SSR styles)

@nibcss/react

Use Vue (v-nib, useNib)

@nibcss/vue

Use Angular ([nib], provideNib)

@nibcss/angular

Use Svelte (use:nib)

@nibcss/svelte

Style Rails / Django / Laravel / PHP templates

@nibcss/cli

Build your own integration

@nibcss/core (zero dependencies, no DOM)

@nibcss/devtools — the error overlay — is installed and wired automatically by @nibcss/unplugin in development.

Engine
@nibcss/core

Parses attributes, resolves tokens and recipes, generates CSS. Runs anywhere.

Build time
unplugin · next · nuxt · cli

Scan your source and write a static stylesheet before the page ever loads.

Run time
runtime · react · vue · angular · svelte

Style dynamic values and elements created in the browser.

Install#

The most common setup — a bundler plus a framework adapter:

Terminal
npm i -D @nibcss/unplugin
npm i @nibcss/runtime @nibcss/react

Replace @nibcss/react with @nibcss/vue, @nibcss/angular or @nibcss/svelte for your framework. Build-time packages (unplugin, next, nuxt, cli) are dev dependencies; the runtime and adapters ship to the browser.

From a CDN#

jsDelivr and unpkg mirror every npm release. Pin a major version in development and an exact version in production:

HTML
<!-- latest 1.x -->
<script src="https://cdn.jsdelivr.net/npm/@nibcss/runtime@1"></script>

<!-- pinned, with Subresource Integrity (hash from jsDelivr's file page) -->
<script
  src="https://cdn.jsdelivr.net/npm/@nibcss/runtime@1.1.1"
  integrity="sha384-…"
  crossorigin="anonymous"></script>

The CDN build is a single self-contained file (~23 kB, engine included) that exposes window.Nib.

Requirements#

Node.js (build tools, CLI)

18 or newer

Browsers (runtime)

Evergreen browsers — Chrome, Edge, Firefox, Safari. Uses MutationObserver and CSS.supports.

TypeScript

Optional. Types ship with every package.

Frameworks

React 17+, Vue 3.3+, Angular 16+, Svelte 4 & 5, Next.js, Nuxt 3

The config file#

Every tool looks for a config at the project root, in this order: nibcss.config.ts, .mts, .js, .mjs, .cjs, then the same names with nib.config. npx @nibcss/cli init — or the build plugin on its first run — writes a starter file in which every option is documented.

Next steps#