1. 1

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

2. 2

   Get a theme snippet and start using it.

   +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

   Install and enable a functions and mixins polyfill. npm i vite-plugin-functions-mixins (or with your package manager), then:

   vite.config.ts

   import { defineConfig } from "vite";
   import { functionsMixins } from "vite-plugin-functions-mixins";
   
   export default defineConfig({
     plugins: [functionsMixins({ deps: ["m3-svelte"] })],
   });

4. 4

   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. Keep learning: detailed walkthrough

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

<Button variant="filled" onclick={() => alert("Hello world")}>Click me</Button>