Menu
Pico Reforgedv2.0

Suggested

↑↓ to moveEnter to openEsc to close

Color scheme

Primary color

Theme: azure

Getting startedComing from Pico CSS

Coming from Pico CSS

What carries over from Pico CSS v2.1.1, what changed, and where the full migration guide is.

On this page

Pico Reforged is a fork of Pico CSS v2.1.1 by Lucas Larroche (MIT). It keeps the public surface: the CDN file names, the classes, the attribute hooks and the --pico-* variables. For most pages the migration is one URL.

HTML
<!-- before -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />

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

Every one of the 238 files of v2.1.1 exists under the same name, see the version picker. In an npm project, replace @picocss/pico with @rusticstack/pico-reforged.

What looks different

The markup, class names and variables are the same, but the default look is newer on purpose: a 16px root instead of one that grows to 21px, 42px controls, rounder corners, lighter shadows, a near-neutral dark scheme, a tonal secondary button, solid focus outlines and soft badges. Field borders and focus colors now reach 3:1 contrast in every theme. See Coming from Pico CSS for the full list and a block of variables that brings most of the v2.1.1 look back. With dir="rtl" a few spacings and corners now use logical properties, which fixes the mirrored layout.

What changed under the page

  • The source is plain CSS in cascade layers, not Sass. Your own unlayered CSS beats the framework without !important.
  • The browser floor is Chrome and Edge 111, Firefox 128 and Safari 16.4. Stay on v2.1.1 if you need older browsers. See browser support.
  • The Sass options are CSS variables or compiler options. For example $theme-color is a themed file or @pico { theme: jade; }, and $enable-classes: false is the class-less build.
  • A <dialog> opened with showModal() animates on its own. The .modal-is-open classes still work.

What is new

Extras, popover and anchor positioning patterns, custom themes from one color, a CLI, and build integrations that purge unused rules. They are all opt-in. See Introduction for the list.

The complete guide, with the Sass table and every difference, is Migration from Pico CSS.

Credit

Pico Reforged is a separate project and is not the official Pico CSS. It is not made or endorsed by its author, and it does not use the Pico CSS logo. The license text keeps the original copyright.