◈DSS

Design Systems
Comparison Platform

8 React component libraries × 6 styling solutions × 9 design systems × 3 rendering modes — measured with real Core Web Vitals and bundle metrics.

Explore the Matrix →View Performance Data
8
Component Libraries
6
Styling Solutions
9
Design Systems
3
Rendering Modes

What's measured

◫coming soon

Library × Styling Matrix

8 component libraries × 6 styling solutions. Each cell measures bundle size, Core Web Vitals, and RSC compatibility.

⚡coming soon

Performance Comparison

Sortable table of real LCP, CLS, INP, JS payload delta, and chunk counts across all pairings and rendering modes.

◈coming soon

Benchmark Patterns

10 complex UI patterns (data table, form modal, combobox, virtual list…) implemented per library with perf metrics.

◉coming soon

Design Systems

9 design systems as interchangeable themes. Switch between Material, Fluent, Spectrum, Carbon, Primer, and more.

◎coming soon

Token Playground

Edit design tokens live and see the result across all libraries simultaneously. Export as CSS vars, Tailwind, or Panda CSS.

◬coming soon

Claude AI Demo

Claude uses tool calls to render components from any library+styling pairing. Inspect tool call JSON, tokens, and latency.

Libraries covered

Headless

Base UI
MUI
0.5M/wk
WCAG AA
Radix UI
WorkOS
2.0M/wk
WCAG AA
React Aria
Adobe
0.8M/wk
WCAG AAA
Headless UI
Tailwind Labs
1.5M/wk
WCAG AA

Styled / Opinionated

shadcn/ui
shadcn
copy-paste
RSC ✓
Material UI
MUI
5.8M/wk
RSC ✗
Mantine
Vitaly Rtishchev
0.9M/wk
RSC ✓
Ant Design
Ant Group
1.1M/wk
RSC ✓