Material 3 Expressive, for React.
A complete Material 3 Expressive component library for React. Accessible components with real state layers, springy motion and runtime token theming — shipped as precompiled CSS, so there’s zero setup. Already on Tailwind? Import the theme partial and every M3 token becomes a utility.
WHY THIS LIBRARY
Everything you need to build with Material 3 Expressive
Accessible by default
Focus management, ARIA, full keyboard support and visible focus — every component is tested with jest-axe.
Runtime token theming
Color, shape and type are M3 tokens. Flip light and dark or restyle the whole UI at runtime — no rebuild.
Expressive motion
Real state layers, a pointer-following ripple, shape morphing and springy transitions from M3 Expressive.
Precompiled CSS, zero setup
Import one stylesheet and go. No Tailwind, no PostCSS and no ThemeProvider required.
Works with or without Tailwind
Use the precompiled CSS, or import theme.css to get every M3 token as a Tailwind v4 utility — like this very site.
Framework-agnostic & RSC-ready
No next/* imports, native img/anchor elements, ESM + CJS + types. Drops into any React 19 app, Server Components included.
GET STARTED
Two ways to style. Both ship with the library.
Zero config
Import the precompiled stylesheet once — no build setup at all.
import "react-material-expressive/styles.css";Bring your own Tailwind
Already on Tailwind v4? Import the theme partial and every M3 token becomes a utility.
@import "tailwindcss";
@import "react-material-expressive/theme.css";This very landing page does both — it imports the precompiled CSS and uses theme.css for its own utilities.
COMPONENTS
Buttons & actions
Buttons
Real M3 state layers and a pointer-following ripple.
Icon buttons
Hover one for an accessible tooltip.
Chips
Filtering for: Motion.
Button groups
Standard (press morph) and connected (segmented toggle).
Split & FAB menu
Floating actions
Three FAB sizes plus an extended FAB.
COMPONENTS
Forms & inputs
Text fields
We never share it
Select & toggles
Selected fruit: apple.
Checkbox & radio
COMPONENTS
Date & time pickers
Date picker
Picked: —
Docked & range
Inline field + modal range
Time picker
Picked: 10:30
COMPONENTS
Navigation & content
Tabs
A springy FLIP indicator slides between tabs.
Menu & search
A dropdown menu and a docked search bar.
List & avatars
- Inbox24 unreadAL
- Starred
COMPONENTS
Feedback & status
Dialog & snackbar
Focus-trapped modal, scrim and emphasized motion.
Progress
Linear, wavy and circular indicators.
Badges & tooltip
Hover the info button for a tooltip.