Introduction
md3-react is a comprehensive Material Design 3 component library for React applications. It provides a set of accessible, customizable, and SSR-compatible components that follow Google's latest Material Design 3 specifications.
Features
- Material Design 3: Full implementation of MD3 design tokens and components
- TypeScript: Written in TypeScript with comprehensive type definitions
- SSR Compatible: Works seamlessly with Next.js and other SSR frameworks
- Accessible: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
- Tree Shakeable: Import only what you need for optimal bundle sizes
- Customizable: Powerful theme system with CSS variables
Packages
| Package | Description |
|---|---|
@md3-react/core | Main component library (Button, Typography, Icon, etc.) |
@md3-react/theme | Theme system with design tokens and ThemeProvider |
@md3-react/utils | Internal utilities (not typically needed directly) |
Design Philosophy
md3-react follows these core principles:
- Faithfulness to MD3: Components adhere closely to Material Design 3 specifications
- Developer Experience: Intuitive APIs with excellent TypeScript support
- Performance: Zero-runtime CSS with Vanilla Extract, tree-shakeable exports
- Accessibility: Components are accessible by default
- Customization: Easy theming without sacrificing defaults
Browser Support
md3-react supports all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
MIT License