Getting started

Install

npm i m3nerd

Requires Svelte 5 (>= 5.46). The package is ESM-only and peer-depends on svelte.

Usage

Import the stylesheet once at your app root, then use components anywhere:

<script lang="ts">
	import 'm3nerd/styles.css';
	import { Button, Card, TextField } from 'm3nerd';
</script>

<Card variant="elevated">
	<TextField label="Email" placeholder="you@example.com" />
	<Button variant="filled" onclick={submit}>Subscribe</Button>
</Card>

The m3nerd/styles.css export resolves from the published package (see exports in package.json).

Theming

Every color, shape, and density value is a CSS custom property. Override them on :root (or any subtree). Light and dark values both travel in light-dark(), so a single override updates both schemes.

:root {
	--m3-sys-primary: light-dark(#b3261e, #ffb4ab);
	--m3-sys-shape-medium: 16px;
}

:root[data-theme='dark'] {
	color-scheme: dark;
}

Adaptivity

Five breakpoints, matching the Material Foundations spec. Components branch on tokens and CSS media/container queries — no resize observers in userland.

Density

Set data-density on <html> to trade comfort for rows. compact shrinks control heights to 0.875×; spacious grows them to 1.125×.

<html data-density="compact">

TV focus mode

Set data-focus-mode="tv" for 10-foot interfaces: 64px touch targets, 52px controls, larger body type, and a glowing focus ring that scales the focused element.

<html data-focus-mode="tv">

Motion

Official Material 3 Expressive springs, pre-converted to cubic-bezier and duration pairs. Spatial tokens may overshoot; effect tokens (color, opacity) are critically damped. prefers-reduced-motion collapses every composite token to 1ms.