| name | m3-web-svelte |
| description | Implement Material Design 3 in Svelte using SMUI (Svelte Material UI) or @material/web directly. Covers component usage, theming, and Svelte 5 compatibility. Use this when building M3-styled Svelte or SvelteKit applications. |
| license | Apache-2.0 |
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
Resources
