Quick start

1

Install M3 Svelte
Use token-shaker?

pnpm install m3-svelte vite-plugin-functions-mixins -D

2

Enable plugins
Use pure Vite?

import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { functionsMixins } from "vite-plugin-functions-mixins";

export default defineConfig({
  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] })],
});

3

Enable your theme snippet

<script>
import "../app.css";
</script>

/* Your theme snippet */

4

Enable a font
Use custom font?

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,400..700&display=swap" />

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

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