Welcome to M3 Svelte! If you haven't already, play around with the components on the home page. It's rather fun. They even adapt to the theme you pick. You should also check out the Discord and GitHub if you want to keep track of this project.

This page is a detailed walkthrough of how to use M3 Svelte: we'll take you from configuration to advanced usage.

Configure your app

The first thing to do is to set up your theme and font. If you haven't done that yet, the quick start page will help you.

Beyond that, you can configure some general settings with CSS variables. You might already know that you can change the default font stack with --m3-font, but you can also customize the fonts of certain sizes (eg --m3-font-label) and their configuration (eg --m3-font-label-large-size). You can also tweak rounding by setting variables like --m3-util-rounding-small and --m3-button-shape.

One obscure thing you can configure is ripples. You can use a simpler layer by defining M3_SVELTE_NO_RIPPLE to true in your Vite config.

Make your own components

Plain

Tailwind

Chances are M3 doesn't have everything you need. That's where you can make your own components while still using Material 3 elements. Here's an example.

Component.svelte

<button>Click me</button>
<style>
  button {
    background-color: rgb(var(--m3-scheme-surface-container-low));
    color: rgb(var(--m3-scheme-primary));
    box-shadow: var(--m3-util-elevation-1);
    border-radius: var(--m3-util-rounding-full);
  }
</style>

You might also want to make your app match your theme. Here's what that could look like:

app.html

<body class="m3-font-body-large">

app.css

body {
  background-color: rgb(var(--m3-scheme-background));
  color: rgb(var(--m3-scheme-on-background));
}

So what's going on here? We're using M3 Svelte globals. All of them can be used in components, and all of them can be overridden (as outlined earlier). Some come from your custom theme, but most are defaults from styles.css.

Use M3 Svelte components

It's usually simple to use components. For example, this is what it looks like to use a Button:

Component.svelte

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

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

There are a few ways to get more info on how to use a component.

Click the code button on the component on the home page
Read the component guide
Check the M3 Svelte source code