Build your own minimal design system by compiling a custom version of Pico's CSS framework with SASS.

To get the most out of Pico, we recommend compiling your own version with SASS. This way, you can include only the required modules and personalize the settings without overriding CSS styles.

Avoid modifying Pico’s core files whenever possible. This approach allows you to keep Pico up to date without conflicts since the Pico code and your custom code are separated.

You can import Pico into your SCSS file with @use:

@use "pico";

If you are using Sass Command-Line Interface to compile your .scss files, you can define the load path using sass --load-path=node_modules/@picocss/pico/scss/ to avoid using relative URLs like:

@use "../../../node_modules/@picocss/pico/scss/pico";


You can set custom settings with @use "pico" with ( ... );. These custom values will override the default variables.

Here is an example to generate the classless version:

// Pico classless version
@use "pico" with (
  $enable-semantic-container: true,
  $enable-classes: false

Example to generate a lightweight version without .classes, uncommon form elements, and components.

This version reduces the weight of Pico by ~50%.

// Pico lightweight version
@use "pico" with (
  $enable-semantic-container: true,
  $enable-classes: false,
  $modules: (
    "content/code": false,
    "forms/input-color": false,
    "forms/input-date": false,
    "forms/input-file": false,
    "forms/input-range": false,
    "forms/input-search": false,
    "components/accordion": false,
    "components/card": false,
    "components/dropdown": false,
    "components/loading": false,
    "components/modal": false,
    "components/nav": false,
    "components/progress": false,
    "components/tooltip": false,
    "utilities/accessibility": false,
    "utilities/reduce-motion": false
All default settings
// Prefix for CSS variables
$css-var-prefix: "pico-" !default;

// Define the root element used to target <header>, <main>, <footer>
// with $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;

// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;

// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
// Fluid layout if disabled
$enable-viewport: true !default;

// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: true !default;

// Enable responsive typography
// Fixed root element size (rem) if disabled
$enable-responsive-typography: true !default;

// Enable .classes
// .classless version if disabled
$enable-classes: true !default;

// Enable transitions
$enable-transitions: true !default;

// Enable overriding with !important
$enable-important: true !default;

// Breakpoints, viewports and root font size
$breakpoints: () !default;
$breakpoints: map.deep-merge(
    // Small (landscape phones)
    // Font size: 17px
        breakpoint: 576px,
        viewport: 510px,
        root-font-size: 106.25%,

    // Medium (tablets)
    // Font size: 18px
        breakpoint: 768px,
        viewport: 700px,
        root-font-size: 112.5%,

    // Large
    // Font size: 19px
        breakpoint: 1024px,
        viewport: 950px,
        root-font-size: 118.75%,

    // Extra large
    // Font size: 20px
        breakpoint: 1280px,
        viewport: 1200px,
        root-font-size: 125%,

    // Extra extra large
    // Font size: 21px
        breakpoint: 1536px,
        viewport: 1450px,
        root-font-size: 131.25%,

// Modules to export
$modules: () !default;
$modules: map.merge(
    // Theme
    "themes/default": true,

    // Layout
    "layout/document": true,
    "layout/landmarks": true,
    "layout/container": true,
    "layout/section": true,
    "layout/grid": true,
    "layout/scroller": true,

    // Content
    "content/link": true,
    "content/typography": true,
    "content/embedded": true,
    "content/button": true,
    "content/table": true,
    "content/code": true,
    "content/miscs": true,

    // Forms
    "forms/basics": true,
    "forms/checkbox-radio-switch": true,
    "forms/input-color": true,
    "forms/input-date": true,
    "forms/input-file": true,
    "forms/input-range": true,
    "forms/input-search": true,

    // Components
    "components/accordion": true,
    "components/card": true,
    "components/dropdown": true,
    "components/group": true,
    "components/loading": true,
    "components/modal": true,
    "components/nav": true,
    "components/progress": true,
    "components/tooltip": true,

    // Utilities
    "utilities/accessibility": true,
    "utilities/reduce-motion": true

// Shortcut for CSS vars prefix
$✨: --#{$css-var-prefix};

Custom theme#

To create a custom version of Pico with a fully custom theme that reflects your brand identity, you can:

  1. Exclude the default theme from compilation,
  2. Import your custom theme (you can duplicate Pico's default theme as a starting point and customize it to match your brand's style).
// Your custom theme
@use "path/custom-theme";          
// Pico without default theme
@use "pico" with (
  $modules: (
    "themes/default": false