Installation

Pick the route that fits the project. They all give you the same CSS.

pnpm add @rusticstack/pico-reforged

npm install @rusticstack/pico-reforged

yarn add @rusticstack/pico-reforged

bun add @rusticstack/pico-reforged

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@2/css/pico.min.css" />

CDN#

No build step. Link the file in the <head>. The file names are the same as in Pico CSS v2.1.1.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@2/css/pico.min.css"
/>

unpkg serves the same files:

<link
  rel="stylesheet"
  href="https://unpkg.com/@rusticstack/pico-reforged@2/css/pico.min.css"
/>

Other builds and themes are other file names, see the version picker. The opt-in extras are separate files. Load them after the main file:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@2/css/pico.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@2/css/pico.extras.min.css"
/>

To take a single extra, use css/extras/tabs.min.css or another name from pico-reforged extras.

npm#

npm install @rusticstack/pico-reforged

pnpm, Yarn and Bun work the same way, for example pnpm add @rusticstack/pico-reforged.

The built files are in node_modules/@rusticstack/pico-reforged/css/. Link one from your HTML, or copy it into your public folder. In a bundler the package root resolves to css/pico.min.css:

import "@rusticstack/pico-reforged";

Other entry points:

Vite and PostCSS#

With an integration you import the package in your own CSS, and the build compiles it for the browser floor and removes the rules your sources never use. It works like @import "tailwindcss".

/* src/app.css */
@import "@rusticstack/pico-reforged";

For Vite (6.3 or newer), add the plugin:

// vite.config.ts
import { defineConfig } from "vite";
import pico from "@rusticstack/pico-reforged/vite";

export default defineConfig({
  plugins: [pico()],
});

For Next.js and other PostCSS setups, put the PostCSS plugin first in the list:

// postcss.config.mjs
export default {
  plugins: {
    "@rusticstack/pico-reforged/postcss": {},
  },
};

Configuration sits next to the import, in plain CSS. @pico sets the theme, extras and purge mode, and @source adds files to the scan:

@import "@rusticstack/pico-reforged";

@pico {
  theme: jade;
  extras: tabs badge;
  purge: safe;
}

@source "../content";
@source inline("modal-is-open aria-busy");

In development you get the full stylesheet. In a production build the default safe mode drops a rule only when a class, an id or an attribute name it needs appears nowhere in your sources. aggressive also judges tags and attribute values, and is opt-in. Astro, SvelteKit, Nuxt and the rest are covered on the Integrations page.

CLI#

The package installs a pico-reforged command (Node 22.18 or newer). The commands below need the package in your project (npm install -D @rusticstack/pico-reforged). Without an install, write npx @rusticstack/pico-reforged instead of npx pico-reforged. The command builds a custom file, lists what exists, and purges a built site.

npx pico-reforged build --theme jade --extras tabs,badge --minify --out public/pico.css
npx pico-reforged themes
npx pico-reforged extras
npx pico-reforged modules
npx pico-reforged matrix css
npx pico-reforged purge public

Run pico-reforged --help for every flag. A theme can also be one color, for example --theme "#e5484d".

Download#

For a plain file, take it from the npm package. Its css/ folder holds every build.

npm pack @rusticstack/pico-reforged
tar -xzf rusticstack-pico-reforged-*.tgz package/css

You can also save a file straight from the CDN link, or clone the repository and run pnpm install && pnpm build to rebuild css/.

Next steps#

• Usage: choose the class, class-less, conditional or fluid build.
• Browser support: what the compiled files target.