Install PicoCSS with Svelte

Pico CSS is a classless CSS framework that auto add styles to default HTML elements allowing you to effortlessly build beautiful websites. Here's how to install and use it in Svelte or SvelteKit.

Install Pico

Pico CSS can be installed with NPM using the command below:

1npm i @picocss/pico

Import to Layout

To import Pico CSS into your Svelte application, add an import statement in your +layout.svelte file. The +layout.svelte should be located at the top of the routes folder in the source of the application.

1// +layout.svelte
2<script>
3  import '@picocss/pico'
4  ...
5</script>
6
7<slot />

Customization

Pico CSS provides built-in customization using CSS variables, for a full guide check out the docs here. All the variables should be contained inside of a :root selector and be put into the app.css file.

To dynamically change the variables with JavaScript you can use the setProperty method like here

1/* app.css */
2:root {
3 /* Get a list of themes from the PicoCSS website
4  --primary: aqua;
5}

Usage

 1<!-- +page.svelte -->
 2
 3<!-- Dropdown -->
 4<details role="list">
 5  <summary aria-haspopup="listbox">Dropdown</summary>
 6  <ul role="listbox">
 7    <li><a>Action</a></li>
 8    <li><a>Another action</a></li>
 9    <li><a>Something else here</a></li>
10  </ul>
11</details>