Material 3 Expressive, in Svelte
A component library built to the M3 Expressive spec — springy, interruptible motion, a 35-shape morphing library, emphasized type and dynamic color from any seed. Everything on this page is live: press it, drag it, recolor it.
- 35 morphing shapes
- 6 motion springs
- 49 dynamic color roles
- 30 type styles
Dynamic color
Live theme
Pick a seed. Material Color Utilities generates all 49 roles for light and dark, and the whole page recolors in place.
- Primary #6750a4
- Primary container #eaddff
- Secondary container #e8def8
- Tertiary container #ffd8e4
- Surface container highest #e6e0e9
- Inverse surface #322f35
Highlights
Touch the spec
Every tile is a working component, not a picture. Press, toggle, drag and open them — shapes morph and springs settle exactly as the M3 Expressive tokens describe.
Common buttons
5 sizes · round / square · spring press morph
Toggle icon buttons
4 styles · round → square when selected · icon fills
FAB menu
FAB morphs to close · staggered items · fast spatial
Open the menu
Progress & loading
Wavy linear + circular · 7-shape loading morph
Slider
5 sizes · value indicator · handle narrows on press
Navigation bar
Tall 80dp · pill indicator · badges
Switch
Handle grows when on · optional icons
Filter chips
2 selected · checkmark swap · shape morph
Segmented list
2dp gaps · 16 / 4dp corners · selection rounds
Split button
2dp gap · inner corners morph · chevron turns
Try both halves
Pages