The Best CSS Framework For Svelte

Published Dec 11, 2022

Table of Contents


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'

<slot />

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

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


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.


If you want to support the content you're reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.

Become a patreon
Subscribe For Updates
Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub