Material 3
Expressive.
A complete React component library implementing Google's Material 3 Expressive system — 41 components, official design tokens, physics-based spring motion, shape morphing, and an ownable shadcn registry.
New in Expressive
M3 Expressive introduces playful shape morphing, variable-width buttons, and a shape-shifting loading indicator — all implemented here with real spring physics.
Fab menu
New in Material 3 Expressive: a separate 56dp container-colored close button reveals a staggered cascade of 56dp solid-color extended action buttons. Horizontal and docked layouts remain documented library extensions.
Split button
New in Material 3 Expressive: a split button joins a primary action with an arrow segment that opens a dropdown of related actions, saving space while keeping the default action one tap away.
Button group
New in Material 3 Expressive: standard button groups use size-aware 18/12/8/8/8dp gaps; connected groups use 2dp gaps and size-aware asymmetric corners. Both support five official sizes, selected shape inversion, and pressed-width redistribution.
Loading indicator
The M3 Expressive loading indicator loops through seven official polygon shapes when indeterminate. With progress, it uses the official determinate Circle-to-SoftBurst morph from 0 to 1. The uncontained indicator is the default; a contained tonal treatment is available for stronger emphasis.
Carousel
Material 3 Expressive carousels support multi-browse, standard or multi-aspect uncontained, hero, and vertical portrait full-screen layouts. Items use parallax, snap scrolling, keyboard movement, and reduced-motion fallbacks.
Slider
Current Material 3 Expressive sliders support standard, centered, and range values in horizontal or vertical layouts. Five official size configurations scale the track and handle, with optional inset icons, stops, value labels, and native form association.
Top app bar
Top app bars display screen information and actions. Baseline variants are 64dp small/center, 112dp medium, and 152dp large; current flexible variants add larger type and subtitles. When search is configured, a search action activates the current SearchView overlay instead of replacing the title inline.
Toolbar
New in Material 3 Expressive: a 64dp pill of contextual actions with 8dp internal horizontal padding and at least 16dp outside padding. Toggle actions always expose aria-pressed=true or false. The dockable variant morphs between a horizontal pill and a square full-width docked bar.
Motion you can feel
Every transition in this library is powered by the official M3E spring tokens — including the signature bouncy springs.expressive curve. Press the buttons and watch the shapes morph.
Quick start
Add one component from the GitHub-hosted shadcn registry. The command also adds the shared Material tokens, fonts, helpers, and runtime dependencies. You own the installed source.
bunx shadcn@latest add jomarmontuya/m3-expressive/button#v0.1.0-beta.1import { Button } from "@/components/m3/Button";
import { Card } from "@/components/m3/Card";
export function Checkout() {
return (
<Card variant="elevated" className="p-6">
<Button variant="filled" icon="shopping_cart">
Buy now
</Button>
</Card>
);
}import { springs } from "@/lib/m3/tokens";
// Official M3E spring tokens — physics, not durations
<motion.div
animate={{ scale: 1.1 }}
transition={springs.expressive} // the bouncy one
/>
// Tokenized color roles — auto light/dark
<button className="bg-m3-primary text-m3-on-primary" />