Quick start

1

Install M3 Svelte

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

2

Enable functions and mixins

SvelteKit 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

import "./app.css";

/* Your theme snippet */

4

Enable Google Sans Enable a 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>