Admin demo

100% of styling values and 90.2% of components come from the design system, up from 0% before the move.

Tokens 100% 100% of styling values come from tokens (445 uses, no hard-coded value). Up 100 points since before the move to Bridge (original Material UI version).

Components 90.2% 90.2% of components come from the design system (239 of 265). Up 90.2 points since before the move to Bridge (original Material UI version).

Over time

Tokens Components

Where components come from

Bridge 239 Other libraries 22 Plain HTML elements 4 Show components

Bridge

• Card26
• Skeleton24
• CardBody18
• Button12
• TableCell12

ra-core

• LinkBase16

recharts

• Area1
• AreaChart1
• CartesianGrid1
• Tooltip1
• XAxis1

Plain HTML elements

• <img>3
• <a>1

Hard-coded values

No hard-coded value left.

• How adoption is measured Adoption is the share of colors, sizes and components in a product that come from the design system.

  Tokens: token uses divided by token uses plus hard-coded values (colors, lengths, radii, shadows, durations, layers, fonts).

  Components: Bridge components divided by every UI component in the product: Bridge components, components from other libraries, plain HTML elements that should be Bridge components (buttons, inputs, selects, dialogs, tables, links, images), charts, and local components that look like a Bridge component. Providers do not count.

  Hard-coded values: exact means the value equals a token, safe to replace. Near means a token is close (the nearest color as the eye sees it, the nearest step of a scale). None means no token fits: the value may need a new token or a design decision.

Other runs of Admin demo: react-admin demo, original MUI source (Oct 16, 2026) . Open on GitHub (opens in a new tab)