FREEDOM251

Freedom251 › UI Kit Libraries

react-md

Free plan Web

Visit react-md Alternatives Pricing

react-md's own site

What react-md is

react-md is a free React component library for building web interfaces with Sass and SCSS styling. Its collection includes more than 100 components, over 60 hooks, and over 40 utilities, along with layout tools for fixed headers, navigation panels, and main content areas. The styles follow Material Design and can be adjusted during compilation with Sass variables or at runtime with Sass functions and mixins. Customized colors are updated to meet a minimum contrast ratio. More complex widgets follow W3C ARIA authoring practices for screen reader access and keyboard navigation. The default theme uses #2196f3 and #ff9100 as its primary and secondary colors, and Roboto as its font. Icons can be supplied as custom icons, SVG components from @react-md/material-icons, or Material Symbols. Installation requires React and ReactDOM v19 or above, as well as @react-md/core and sass. Setup instructions cover npm, pnpm, and yarn.

Who it suits

react-md suits developers building web applications with React who want a Material Design-based component library with Sass customization. Its layout components and accessibility guidance may also suit teams building interfaces that use keyboard navigation and screen readers.

What it does well

  • More than 100 components, 60+ hooks, and 40+ utilities.
  • Provides components and hooks for common application layouts.
  • Custom color settings maintain a minimum contrast ratio.
  • More complex widgets follow W3C ARIA authoring practices.

What to know first

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

Plans

PlanBilled and limitsPrice
react-mdReact component library; requires React and ReactDOM v19 or above and SassFree

As react-md.dev lists them, read 5 Oct 2026. The maker's own page has the final word.

Getting started

  1. Visit https://react-md.dev/.
  2. Use a web development environment with React and ReactDOM v19 or above.
  3. Install @react-md/core and sass with npm, pnpm, or yarn.
  4. Set up fonts using Fontsource, Google Fonts CDN, or the documented Next.js option.
  5. Configure the theme, Sass styles, and icons for your application.

Verdict

react-md combines a large component and utility set with configurable Sass styling and guidance for accessible widgets. It requires a React 19-or-above setup and the listed core and Sass packages.

Questions

How much does react-md cost?

The react-md plan is free, and the pricing model is free.

What does react-md require?

Installation requires React and ReactDOM v19 or above, plus @react-md/core and sass.

Which platforms does react-md support?

react-md is for web use.

Can I customize the appearance?

Yes. Styles are based on Material Design and can be configured with Sass variables, functions, and mixins. Icons can use custom icons, SVG components from @react-md/material-icons, or Material Symbols.

What accessibility support does it provide?

More complex widgets follow W3C ARIA authoring practices for screen reader accessibility and keyboard movement. Customized colors are adjusted to meet a minimum contrast ratio.

Facts from react-md's own pages

Accessibility
More complex widgets follow W3C ARIA authoring practices for screen reader accessibility and keyboard movement. · react-md.dev, 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, 5 Oct 2026
Components and utilities
The library provides 100+ components, 60+ hooks, and 40+ utilities. · react-md.dev, 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, 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, 5 Oct 2026
Icons
Icons can be configured with custom icons, SVG components from @react-md/material-icons, or Material Symbols. · react-md.dev, 5 Oct 2026
Integrations
Installation instructions show usage with npm, pnpm, and yarn, and reference Next.js for font setup. · react-md.dev, 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, 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, 5 Oct 2026
Product
react-md is an accessible React component library styled with Sass/SCSS. · react-md.dev, 5 Oct 2026
Requirements
Installation requires React and ReactDOM v19 or above, plus the @react-md/core and sass packages. · react-md.dev, 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, 5 Oct 2026
Themes
The default theme uses #2196f3 and #ff9100 as its primary and secondary colors. · react-md.dev, 5 Oct 2026

Where react-md stands on Freedom251

Look at these too