1. 1

   Install M3 Svelte with npm i m3-svelte (or your package manager).

2. 2

   Copy a theme snippet and paste it on your site.

   +layout.svelte, App.svelte, or similar

   <script>
     import "../app.css"; // Change this if you're not in SvelteKit
   </script>

   app.css

   /* Your theme snippet */

3. 3

   Roboto

   Manual

   Get a font for M3 Svelte to use.

   app.html

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />

Now you can start using components like this. Check the rest of the docs to learn more.

<script>
  import { Button } from "m3-svelte";
</script>

<Button type="filled" on:click={() => alert("Hello world")}>Click me</Button>