1. 1

   Install packages with npm i m3-svelte vite-plugin-functions-mixins (or your package manager).

2. 2

   Enable a functions/mixins polyfill.

   vite.config.ts

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

3. 3

   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 */

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>