Material for Svelte

Material Design 3 (M3) Expressive components for Svelte 5 and Tailwind CSS 4, built on Bits UI: dynamic color, the full type scale and spacing tokens, and spring motion throughout.

Components

Browse every component and variant live in Storybook, with props and usage rules.

Get started

Install the package, set up the CSS and wrap your app. Then theming, tokens, layout and motion.

Guides

Get started

Install the package, set up the CSS in the right order and wrap your app.

Theming

Dynamic color from a source color or image, light and dark schemes, and contrast.

Tokens

Color roles, the type scale, spacing, shape and elevation as Tailwind classes.

Responsive props

Props that take one value per M3 window size, resolved in CSS.

Layout

Pane and PaneGrid: list-detail, supporting pane, resizable and sticky layouts.

Icons

Material Symbols: a playground for every icon, and the four axes as props.

Motion

Springs only, and which M3 transition to use for which kind of change.

Agent skills

Install the Material Design agent skills for this library into your project.