react-md: accessible Material Design components for React with SCSS-based theming
React material design - An accessible React component library built from the Material Design guidelines in Sass
At a glance
- What is it?
- react-md is a TypeScript React component library that follows Material Design and the WAI-ARIA Authoring Practices Guide, using SCSS for its styles. Installing @react-md/core requires sass as a peer dependency; full setup documentation lives at react-md.dev rather than in the repository README.
- Who is it for?
- Use react-md when you need a React component library that targets the WAI-ARIA practices document from www.w3.org as its accessibility floor and Material Design's specification for its visual model. The SCSS dependency fits projects with an existing Sass pipeline; adding one to a project without Sass carries real overhead.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository last received commits 8 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 11, 2026, and from our analysis. They are not legal advice.
Editorial analysis
What react-md expects from your project before a single component renders
react-md targets React developers who need Material Design components that also meet a formal accessibility standard. It is not a drop-in stylesheet or a single CSS import: the library is written in TypeScript, its styles live in SCSS, and the install command adds @react-md/core alongside sass as an explicit peer dependency. Before the first component renders, the project needs a Sass processing step in its build pipeline, and that step is a hard prerequisite rather than an optional post-install addition.
Components are described as low-level and customizable, not as a preset design kit you accept in full. Teams looking for a preconfigured Material Design appearance without customization work should verify that the library's defaults match their requirements before committing, because no example of the default visual output appears in the repository README.
The library targets TypeScript from the start, and the repository's example configurations reflect that orientation. They come in TypeScript and JavaScript variants covering Next.js, Vite, and React Router as build environments. A plain JavaScript project can use @react-md/core, but the TypeScript examples in the repository are the more complete starting points.
Installing @react-md/core and the mandatory Sass peer dependency
The install command from the README is:
npm install @react-md/core sassSass arrives as an explicit dependency rather than an optional add-on, because the library ships SCSS source files instead of pre-compiled CSS. Any project that installs @react-md/core must include a Sass processor in its build toolchain; without one, the styles do not compile and the first import will fail.
Full documentation starts at react-md.dev/getting-started/installation rather than in the repository itself. A developer following only the README after the install step will find nothing further in that file and will need the documentation site to know what to import and how to configure the first component.
Seven example configurations sit in the examples/ directory. For TypeScript projects, nextjs-ts and vite-ts offer ready-made setups for two common build environments, while nextjs-js and vite-js serve projects that stay on plain JavaScript. The react-router-framework-mode directory covers a third build path. Copying the relevant example is a faster starting point than reading the installation page from scratch, because each example already wires together the dependencies and the build configuration.
CSS variables for runtime theming, with a static fallback path for older browsers
Theming in react-md is built on CSS custom properties. Two rendering paths exist: one reads those properties at runtime, and one provides static fallback values for environments that do not support them. Both paths are named as features, but the specific browser versions that trigger the fallback are not specified in the README.
Light, Dark, and System are the three named theme modes. System mode maps to the operating system preference, which in a browser corresponds to the prefers-color-scheme media query. All three modes operate through CSS variables, so switching between them does not require a JavaScript rebuild step at runtime.
What the documentation does not cover is how to select a theme in application code. Whether theme selection happens through a React prop at the root component, a CSS class on the document body, or some other mechanism is absent from the README. That configuration detail lives on the documentation site at react-md.dev, and a project adopting the library should check there before writing any theme-switching code.
WAI-ARIA practices from www.w3.org as the stated accessibility reference
Accessibility conformance targets the WAI-ARIA Authoring Practices Guide at www.w3.org/TR/wai-aria-practices. That document gives keyboard interaction patterns, focus management requirements, and ARIA attribute assignments per component type, and it is a known technical reference that accessibility auditors work from when reviewing applications.
Naming a specific reference document allows a team using react-md to compare the library's keyboard behavior against the same published patterns and to present a concrete reference to a third-party auditor. This is a more auditable position than a library that describes itself as accessible without citing a standard, because the WAI-ARIA guide is versioned and testable.
One gap is whether the library documents any trade-offs between WAI-ARIA interaction patterns and Material Design's visual conventions. Both specifications are maintained independently, and their requirements for certain interactive components do not always align. No record of known conflicts between the two standards appears in the README.
LTR and RTL language support as a core feature, not an add-on
Left-to-right and right-to-left language directions appear in the feature list alongside accessibility conformance, CSS variable theming, and TypeScript. No configuration entry for direction appears in either the README or the install command, so the mechanism is not visible from those two sources alone.
How direction-awareness is implemented determines its runtime cost. A library that resolves RTL at build time through a Sass variable generates different CSS outputs for each direction and cannot switch direction at runtime without rebuilding. A library that resolves direction through a runtime React context or a document-level CSS class can switch without a rebuild. Which approach react-md takes is not described in the README, and a project that needs runtime direction switching should verify this against the documentation site before committing to the library.
Two npm packages in parallel, at different version numbers
Two packages for the same project sit on npm: @react-md/core and the unscoped react-md. Releases show @react-md/[email protected] on 2026-06-25 and [email protected] on 2026-05-14, with the README naming only the scoped package in its install command and providing no migration guidance for the other. A project that installed react-md without the scope has a different package than what the current documentation names, and the repository contains no guide for that transition.
The file CHANGELOG-v5.md at the top level holds v5 API changes separately from the main commit history, confirming that at least one major version transition preceded the current 7.x series. A project upgrading from an older installation should examine both files before assuming its existing configuration is compatible with @react-md/core.
A pnpm monorepo with seven example starter configurations
This is a pnpm workspace monorepo managed with Turborepo. Top-level entries include turbo.json, pnpm-workspace.yaml and pnpm-lock.yaml, alongside a packages/ directory that holds the library's individual packages and an apps/ directory for applications. The examples/ directory contains the seven starter configurations a new project can copy.
Those seven are mlaursen-nextjs, mlaursen-vite, nextjs-js, nextjs-ts, react-router-framework-mode, vite-js, and vite-ts. Two of them carry the author's name rather than a generic template label, which separates the author's personal configurations from the public starter templates. For TypeScript projects, nextjs-ts and vite-ts are the appropriate starting points; nextjs-js and vite-js cover projects on plain JavaScript.
Build tooling at the monorepo root also includes mise.toml for tool version pinning and oxfmt.config.ts for formatting rules. Both are visible in the top-level repository entries but go unexplained in the README, so a new contributor preparing a development environment would need to install both tools before the monorepo build commands will succeed.
Editorial conclusion
Use react-md when you need a React component library that targets the WAI-ARIA practices document from www.w3.org as its accessibility floor and Material Design's specification for its visual model. The SCSS dependency fits projects with an existing Sass pipeline; adding one to a project without Sass carries real overhead. Skip it if you need a library that ships pre-compiled CSS or ready-to-use themes without a Sass build step. Before adopting, confirm which npm package is in your dependencies: @react-md/core and react-md coexist on npm at different patch numbers, and only the scoped package is documented in the README.
Frequently asked questions
What is react-md?
react-md is an accessible React component library built on Material Design guidelines and SCSS. Its primary npm package is @react-md/core, and the full documentation lives at react-md.dev.
How do I install react-md?
The README install command is npm install @react-md/core sass. Both packages are required; the library ships SCSS source files rather than pre-compiled CSS, so a Sass processor must be in the build toolchain.
Does react-md require Sass?
Yes. The install command adds sass alongside @react-md/core because the library ships SCSS source files rather than pre-compiled CSS. A Sass build step is required before any styles will compile.
What accessibility standard does react-md follow?
The README points to the WAI-ARIA Authoring Practices Guide at www.w3.org/TR/wai-aria-practices as its accessibility reference. Left-to-right and right-to-left language directions are also listed as built-in features.
What is the difference between the react-md and @react-md/core npm packages?
Both are npm packages from the same project. The README install command uses @react-md/core, the scoped package. An unscoped react-md package also exists on npm but is not documented in the README, and no migration guide covers the difference between them.