Material PlusA component library that follows the Material specification and extends it

The latest Material Design specification as it stands, with a wider range of components on top of it and a design that goes further. Its options let you run the whole thing more compactly, or open it out for a wider screen.

Get started

All components

Themed in one line

Set --mp-source-color and every colour role follows, exactly as Material generates a scheme from a source colour. No provider, no theme object, no re-render — and it can read the --md-sys-color-* tokens your page already has.

Browse

IME-safe by construction

A controlled input that survives Korean, Japanese and Chinese composition. No dropped syllables, no jumping caret, whatever your onChange does with the value.

MPTextField

TypeScript first

Declarations ship with the package. Your editor knows the prop names and the values they take before you do.

Bring your own icons

MPIcon takes a component or an element from any icon set. lucide-react comes in the box, gathered in a single constants file you can read at a glance.

MPIcon

Why Material Plus

Material Design 3 is a written specification, and a component library can start either from that document or from somebody else's reading of it. This one started from the document, which is why its colour roles, type scale and shape tokens carry the names the specification gives them.

Then there is where the specification stops and a screen does not. The button ladder is the plain example: xs, sm and md are the specification's 32, 40 and 56px, and lg and xl are this library's 64 and 72px — the next size the specification names is 96px, and a 96px button beside a 64px field is not a row. Charts, a data table and a command palette are the same thing one level up. The specification does not name them; applications have them anyway.

It coexists

Nothing here is page-level: no reset, no provider, no global styling. Theming is CSS custom properties in a cascade layer, so a project already running Material keeps its own setup and this one follows along.

Tested in real browsers

Every component carries its own tests, run in Chromium, Firefox and WebKit across three operating systems on every change. The composition tests drive real IME events.

Small on purpose

One runtime dependency, one peer. No CSS-in-JS runtime — the styling is a stylesheet. Every component compiles to its own module, so what you do not import is not shipped.

Features

Material Design 3 colour, type and shape tokens
A colour scheme generated from one source colour
Light and dark schemes
Korean, Japanese and Chinese IME input
Translations in 18 languages
Right-to-left layout
Responsive breakpoints and window size classes
A size ladder from xs to xl
Ten charts
Date and time pickers
Data table and tree view
Command palette and keyboard shortcuts
Seventeen motion components
Layout primitives and page layouts
Nine hooks
TypeScript declarations included
ESM only, tree-shakeable
A stylesheet that splits per component
Next.js server components
A Tailwind CSS v4 token sheet
Tested in Chromium, Firefox and WebKit

Install

bash

npm install material-plus-ui

@base-ui/react, react and react-dom are peer dependencies. One line of CSS wires up the stylesheet:

css

@import 'material-plus-ui/styles.css';

tsx

import { MPTextField } from 'material-plus-ui';

export default function SignIn() {
  const [email, setEmail] = useState('');

  return <MPTextField label="Email" type="email" value={email} onChange={setEmail} />;
}

Preview

Six of them. What is inside a card is not a picture — it is the component, running in this page.

The rest are in All components.