The Best CSS Framework For Svelte

Table of Contents

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.

terminal
npm i @picocss/pico

Import it inside your layout.

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

<slot />

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

+page.svelte
<input type="checkbox" role="switch" />

Customization

You can use CSS variables to customize Pico.

app.css
: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.

app.scss
/* 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.

Support

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