The Best CSS Framework For Svelte

Table of Contents

• Setup
• Customization

Setup

Pico.css is one of my favorite CSS frameworks to use with Svelte and here’s how to set it up and customize it.

Install Pico.css.

npm i @picocss/pico

Import it inside your layout.

<script lang="ts">
  import '@picocss/pico'
  import '../app.css'
</script>

<slot />

This is how simple it to turn a checkbox into a switch.

<input type="checkbox" role="switch" />

Customization

You can use CSS variables to customize Pico.

:root {
  --primary: aqua;
}

Here are the values you can customize and you can learn more from the Pico docs.

If you’re using Sass you can import the components you need from Pico including a custom theme and keep it up to date.

/* custom version */

// theme
@import "@picocss/pico/scss/themes/default";

// import components you need
@import "@picocss/pico/scss/content/button";
@import "@picocss/pico/scss/content/form";

You can look at the pico.scss example to see every component.