EVERYTHING XIAOMI
Get listed

react-md

react-md is a free React component library for building web interfaces with Sass and SCSS.

Place
#20 of 26
Score
5.9
react-md's website

What react-md is

react-md is a free React component library for building web interfaces with Sass and SCSS. It provides more than 100 components, over 60 hooks, and 40 utilities, including layouts for fixed headers, navigation panels, and main content areas. The styling follows Material Design and can be configured during compilation with Sass variables or at runtime through Sass functions and mixins. Color customization automatically updates colors to meet a minimum contrast ratio. 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 artwork, 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 Next.js font setup.

Good

  • Free React component library
  • 100+ components, 60+ hooks, and 40+ utilities
  • W3C ARIA practices guide complex widgets
  • Automatic minimum contrast handling
  • Supports npm, pnpm, and yarn

Watch out

  • Requires React and ReactDOM v19 or above
  • Requires Sass and @react-md/core
  • Web platform only
  • Roboto is the default font

Who it suits

It suits developers building web applications with React who want Material Design components, configurable Sass styling, and documented accessibility guidance. Teams needing reusable layouts and responsive components can use its broader component set.

Verdict

react-md offers a broad, free component and utility set for React web projects. Its Sass configuration and accessibility-oriented widgets are central strengths, provided your project meets the current React and Sass requirements.

Plans and prices

From react-md's own pricing page, checked 5 Oct 2026.

All about pricing
PlanPriceWhat it gives you
react-mdFreeReact component library; requires React and ReactDOM v19 or above and Sass

The facts

Each one read from react-md's own pages, with the date it was checked.

What it does

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

The company

Maker
The opened official pages identify the product and documentation version but do not state a maker name, headquarters, or founding date.checked 5 Oct 2026

Alternatives to react-md

All alternatives
  1. 1

    Figma Wireframe Kit

    Free planAndroidiOSWebAPI
    8.0From $3 a month
    Visit
  2. 2Ant Design Icons logo

    Ant Design Icons

    Free planAndroidiOSWeb
    7.1Free plan
    Visit
  3. 3Shopify logo

    Shopify

    Web
    7.1From $29 a month
    Visit
  4. 4GitHub Primer logo

    GitHub Primer

    Free planOpen sourceWebAPI
    7.0Free plan
    Visit
  5. 5MUI logo

    MUI

    Free planWeb
    6.8From $299 a year
    Visit
  6. 6

    Shadcn Studio Figma UI Kit

    Free planWeb
    6.7$99 one-time
    Visit