Skip to content
SPECIFICTION
Get listed

react-md

react-md.dev

Free plan Web
Visit react-md.dev
Spec score 7.2 #22 of 26 in UI Kit Libraries

What it is

react-md is a free React component library for web interfaces, styled with Sass and SCSS. It provides more than 100 components, over 60 hooks, and 40 utilities, including building blocks for fixed headers, navigation panels, and main content areas. Styles follow Material Design and can be configured during compilation 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-reader access and keyboard movement. The default theme uses #2196f3 and #ff9100 as primary and secondary colors, with Roboto as the default font. Icons can come from custom icons, SVG components in @react-md/material-icons, or Material Symbols. Installation requires React and ReactDOM v19 or above, plus @react-md/core and sass. Documentation covers npm, pnpm, yarn, and font setup through Fontsource, Google Fonts CDN, or Next.js.

Spec sheet

Product
react-md is an accessible React component library styled with Sass/SCSS.Read 5 Oct 2026 · react-md.dev
Integrations
Installation instructions show usage with npm, pnpm, and yarn, and reference Next.js for font setup.Read 5 Oct 2026 · react-md.dev
Maker
The opened official pages identify the product and documentation version but do not state a maker name, headquarters, or founding date.Read 5 Oct 2026 · react-md.dev
Accessibility
More complex widgets follow W3C ARIA authoring practices for screen reader accessibility and keyboard movement.Read 5 Oct 2026 · react-md.dev
Color contrast
Colors are automatically updated to meet a minimum contrast ratio when customizing Sass variables, functions, and mixins.Read 5 Oct 2026 · react-md.dev
Components and utilities
The library provides 100+ components, 60+ hooks, and 40+ utilities.Read 5 Oct 2026 · react-md.dev
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.Read 5 Oct 2026 · react-md.dev
Fonts
Roboto is the default font, and the documentation describes adding it through Fontsource, Google Fonts CDN, or Next.js.Read 5 Oct 2026 · react-md.dev
Icons
Icons can be configured with custom icons, SVG components from @react-md/material-icons, or Material Symbols.Read 5 Oct 2026 · react-md.dev
Layouts
The library provides components and hooks for common web application layouts, including fixed headers, navigation panels, and main content areas.Read 5 Oct 2026 · react-md.dev
Requirements
Installation requires React and ReactDOM v19 or above, plus the @react-md/core and sass packages.Read 5 Oct 2026 · react-md.dev
Security and compliance
The opened official pages describe accessibility and color contrast features but do not state security certifications or compliance claims.Read 5 Oct 2026 · react-md.dev
Themes
The default theme uses #2196f3 and #ff9100 as its primary and secondary colors.Read 5 Oct 2026 · react-md.dev

Plans and prices

react-md Free React component library; requires React and ReactDOM v19 or above and Sass Read 5 Oct 2026 · react-md.dev

Every react-md plan and price →

Strong points and limits

Strong points

  • 100+ components, 60+ hooks, and 40+ utilities
  • Material Design styling with Sass configuration
  • ARIA guidance for complex widgets
  • Automatic minimum contrast handling
  • Components for common application layouts

Limits

  • Requires React and ReactDOM v19 or above
  • Requires @react-md/core and sass packages
  • Web platform only

Who it suits

react-md suits web developers building React applications that need Material Design styling, configurable Sass themes, and documented accessibility practices. It requires React and ReactDOM v19 or newer.

Verdict

react-md offers a broad, Sass-configurable component set for React web applications. Its layout helpers, icon choices, and accessibility-oriented widgets make it suitable when those requirements match your project.

Where Specifiction places it

Alternatives to react-mdAll alternatives →