- Home
- UI Kit Libraries
- react-md
react-md
What it is
react-md is a free React component library for building web interfaces with Sass/SCSS styling. It provides more than 100 components, over 60 hooks and more than 40 utilities, including pieces for fixed headers, navigation panels and main content areas. Styles are based on Material Design and can be configured at compile time with Sass variables or at runtime with Sass functions and mixins. Customized colors are automatically updated to meet a minimum contrast ratio. More complex widgets follow W3C ARIA authoring practices for screen readers and keyboard movement. The default theme uses #2196f3 and #ff9100 as primary and secondary colors, with Roboto as the default font. Icons can use custom artwork, SVG components from @react-md/material-icons or Material Symbols. Installation requires React and ReactDOM v19 or above, plus @react-md/core and sass. Setup guidance covers npm, pnpm and yarn, with font instructions for Fontsource, Google Fonts CDN and Next.js.
For and against
For
- Includes 100+ components and 60+ hooks
- Provides Sass compile-time and runtime customization
- Supports accessible keyboard-oriented widgets
- Automatically maintains minimum color contrast
- Offers common application layout components
Against
- Requires React and ReactDOM v19 or above
- Requires @react-md/core and sass packages
- Web use only
The verdict
react-md offers a broad, free component set with Material Design styling and Sass customization. Its accessibility guidance and contrast handling support interface work where keyboard and screen-reader access matter.
Who it suits
react-md suits developers building React web applications who want Material Design styling, reusable layouts and accessibility-oriented components. It requires React and ReactDOM v19 or above.
Plans and prices
react-md
React component library; requires React and ReactDOM v19 or above and Sass
Read 5 Oct 2026 · react-md.dev
On the record
- Accessibility
- More complex widgets follow W3C ARIA authoring practices for screen reader accessibility and keyboard movement.react-md.dev · read 5 Oct 2026
- Color contrast
- Colors are automatically updated to meet a minimum contrast ratio when customizing Sass variables, functions, and mixins.react-md.dev · read 5 Oct 2026
- Components and utilities
- The library provides 100+ components, 60+ hooks, and 40+ utilities.react-md.dev · read 5 Oct 2026
- Design and styling
- Styles are based on Material Design and can be configured at compile time with Sass variables and at runtime with Sass functions and mixins.react-md.dev · read 5 Oct 2026
- Fonts
- Roboto is the default font, and the documentation describes adding it through Fontsource, Google Fonts CDN, or Next.js.react-md.dev · read 5 Oct 2026
- Icons
- Icons can be configured with custom icons, SVG components from @react-md/material-icons, or Material Symbols.react-md.dev · read 5 Oct 2026
- Integrations
- Installation instructions show usage with npm, pnpm, and yarn, and reference Next.js for font setup.react-md.dev · read 5 Oct 2026
- Layouts
- The library provides components and hooks for common web application layouts, including fixed headers, navigation panels, and main content areas.react-md.dev · read 5 Oct 2026
- Maker
- The opened official pages identify the product and documentation version but do not state a maker name, headquarters, or founding date.react-md.dev · read 5 Oct 2026
- Product
- react-md is an accessible React component library styled with Sass/SCSS.react-md.dev · read 5 Oct 2026
- Requirements
- Installation requires React and ReactDOM v19 or above, plus the @react-md/core and sass packages.react-md.dev · read 5 Oct 2026
- Security and compliance
- The opened official pages describe accessibility and color contrast features but do not state security certifications or compliance claims.react-md.dev · read 5 Oct 2026
- Themes
- The default theme uses #2196f3 and #ff9100 as its primary and secondary colors.react-md.dev · read 5 Oct 2026
