One theme controls every component
Buttons, fields, and cards all use the same color, shape, and motion tokens. Change them through the typed theme API.
Open source · Made for the web
Google’s Material 3 Expressive.
Built for React.
Bring Google’s bold new Material design to the web with React components, expressive motion, and a theme that fits your product.
- React 18 & 19
- TypeScript
- MIT licensed
- 0 runtime dependencies
An independent implementation of Google’s design system.
Try the real componentsInteractive demo
Buttons that respond to you
Press and hold to see the shape change.
Expressive loading
Material shapes replace the usual spinner.
Switch between a fixed value and the full animation.
View LoadingIndicator docs →Everything in this demo comes from the package.
Why expressive?
Meet Google’s next evolution of Material Design.
Material 3 Expressive uses shape, color, size, and motion to draw attention to the right actions. It gives familiar interfaces more character without throwing away the patterns people already know.
See the research from Google46research studies
18,000+participants worldwide
Google tested hundreds of designs to learn what makes an interface easier to use, more distinct, and more appealing.
Built around your brand
Pick a color. The whole interface follows.
Choose one of our presets or use your own source color. Then try the same components in light and dark mode.
Source color
Choose a color and watch the whole page change. You can also compare the components in light and dark mode.
Native input, native validation
Show the tonal palettes behind this demo
Primary
Secondary
Tertiary
Neutral variant
Tonal palettes generated from the source color #6750a4.
Made for real React apps
Material design that behaves properly on the web.
Buttons are buttons. Checkboxes submit with forms. Keyboard interaction, RTL, reduced motion, and forced colors are built in and documented.
Conformant components
Build with buttons, inputs, navigation, overlays, and more. Every component comes with a live example and conformance record.
Browse all components →Extra runtime dependencies
React and React DOM are the only peers. Styles ship as precompiled CSS, with no Tailwind setup or runtime style injection.
See the setup →Tested with server rendering
Built and checked with Next.js and Vite consumer fixtures. Follow the guide for hydration and system color mode.
Read the SSR guide →See how we handle Material adaptations and accessibility on the web.
Bundle baselines: 104.6 kB gzip JavaScript entry + 50 kB gzip complete CSS. Tracked in CI.
Supported browsers: Chrome 120, Edge 120, Firefox 121, Safari 17.2, iOS 17.2.
Try it in your project
Add your first expressive component.
Install the package, import the stylesheet once, and add the provider. The default theme is ready to use.
npm install @language-lit/material3-expressive react react-domApp.tsx
import {
Button,
Material3Provider,
} from '@language-lit/material3-expressive'
import '@language-lit/material3-expressive/styles.css'
export default function App() {
return (
<Material3Provider>
<Button variant="filled">Get started</Button>
</Material3Provider>
)
}Using Next.js? Import the stylesheet in your root layout. See the framework guide →