Does a lot, does it right

M3 Svelte supports:

  • Theming
  • Animations
  • Other tokens
  • Components (including proper ripples)
  • Shapes

I spent winter days making sure my buttons were completely correct, so don't worry about hallucinated styling. Even in edge cases like printing, high contrast mode, or with JavaScript disabled, components still work (if distorted).

Tiny

We tested the sizes of the framework baseline, library baseline, and full size to render a Button. The build setups are available on GitHub.

M3 Svelte (SvelteKit)

Built using token-shaker.

Takes 2.6kB to render a Button.

HTML

CSS

JS (optional)

M3 Svelte (Vite)

Built using token-shaker.

Takes 16.4kB to render a Button.

HTML

CSS

JS

Material Web (Vite)

Material Web uses web components, but isn't developed.

Takes 13.8kB to render a Button.

HTML

JS

M3E (Vite)

M3E uses web components, but is vibe coded, so some of the components look weird. It also has numerous extraneous components.

Takes 32.6kB to render a Button.

HTML

JS

M3 Dreamland (Vite)

M3 Dreamland uses Dreamland, a minimal, experimental web framework. Dreamland is built for client-side apps; it can do SSR, but you have to configure prerendering and such manually.

Takes 29.3kB to render a Button.

HTML

JS

M3 Solid (Vite)

Coming soon. Would show up here.

Beer CSS (Vite)

The good part about Beer CSS is that it has a lot of styles. The bad part is that it's unserious: many of the styles aren't from M3, no support for tree shaking, dark mode requires JS, doesn't really match M3, copies code without credit, etc.

Takes 37.0kB to render a Button.

HTML

CSS

JS (optional)

How so tiny?

M3 Svelte has so many optimizations. Some come with using the platform:

  • SvelteKit can SSR components, meaning they load without JS.
  • Svelte Runes mean app size grows slowly.
  • Svelte attaches each style to each component, so only used styles are loaded.

And others are really interesting:

  • Tokens are grouped in a special layer where they can be inlined or mangled by vite-plugin-token-shaker
  • Cutting-edge functions and mixins make deduplication and customization simple
  • Themes simply declare tokens using light-dark()
  • Icons use Iconify's SVG wrapper format, meaning unlike Material Web, M3E, or Beer CSS we don't need a ~300kB web font
  • A normalized and minified format lets shapes be animated between (for example in the loading indicator) without needing Flubber or 2 paths/shape