M3 Web Svelte

Material Design 3 — Svelte / SMUI

Overview

SMUI (Svelte Material UI) wraps Google's MDC-Web foundation logic in Svelte-native components. Evolving towards M3 with MDC v10 integration. Svelte 5 compatible (v8+). Alternatively, use @material/web directly — Svelte has excellent Custom Elements support.

Keywords: Material Design 3, M3, Svelte, SMUI, Svelte Material UI, SvelteKit, web components, MDC

When to Use

• Svelte or SvelteKit projects
• When you want Svelte-native Material components
• Projects that can also use @material/web directly (Svelte handles Custom Elements well)

Install (SMUI)

npm install svelte-material-ui

Individual packages:

npm install @smui/button @smui/card @smui/textfield @smui/top-app-bar

Install (@material/web — alternative)

npm install @material/web

SMUI Component Examples

Buttons

<script>
  import Button from '@smui/button';
</script>

<Button variant="raised">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button>Text</Button>

Cards

<script>
  import Card from '@smui/card';
</script>

<Card>
  <div class="card-content">
    <h2>Card Title</h2>
    <p>Card content</p>
  </div>
</Card>

Text Fields

<script>
  import Textfield from '@smui/textfield';
</script>

<Textfield variant="outlined" label="Email" />
<Textfield variant="filled" label="Name" />

Using @material/web in Svelte

Svelte handles web components natively:

<script>
  import '@material/web/button/filled-button.js';
  import '@material/web/textfield/outlined-text-field.js';
  import '@material/web/checkbox/checkbox.js';
</script>

<md-filled-button>Click me</md-filled-button>
<md-outlined-text-field label="Email"></md-outlined-text-field>
<md-checkbox></md-checkbox>

Theme via CSS custom properties in your global stylesheet:

:root {
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-ref-typeface-brand: 'Roboto';
}

Checklist

• Choose between SMUI and @material/web based on project needs
• M3 color tokens applied via CSS custom properties or SMUI theming
• Components use M3-aligned variants
• Both light and dark themes supported
• Svelte 5 compatibility verified (SMUI v8+)

Resources

• SMUI: https://sveltematerialui.com/
• SMUI GitHub: https://github.com/hperrin/svelte-material-ui
• @material/web (works in Svelte): https://material-web.dev/
• @material/web GitHub: https://github.com/material-components/material-web

Converted and distributed by TomeVault — claim your Tome and manage your conversions.