Skip to main content

Why SYX: A Measured Comparison

A comparison of SYX against Shadcn UI, Tailwind CSS, Chakra UI, Bootstrap, Material UI and Ant Design across fourteen criteria. Every number about SYX on this page is produced by a command you can run; every claim about the other six is a fact you can check in a minute; every opinion is labelled as one.

SYX does not win the overall total. It comes second. Where it wins, and where it loses badly, is below.

How to read this page

The method comes first because without it the numbers below are decoration.

Conflict of interest, stated up front

This page is written by the author of SYX. It is a self-assessment, not an independent review, and no committee, panel or interview produced it. An earlier version of this page presented seven quotations attributed to job titles — “Lead Frontend Engineer”, “VP of Engineering” and so on. Those people did not exist and the quotes were written here. They have been removed, and what replaced them is the rubric that was missing: the criteria each score was given against, so you can disagree with the standard instead of guessing at it.

Every row in the tables carries one of three labels. They are not decoration either — they say how much weight a claim can bear:

Label What it means How you check it
Measured A number produced by running something against this repository The command is printed next to it. Run it.
Checkable A fact about a system that is public and unambiguous — licence, current major, whether it requires a JS framework, whether it ships runtime JS Open the project's own documentation. Sources listed at the foot of this page.
Judged An opinion. Informed, argued, and still an opinion You can't. Read the rubric and disagree with it if you do.

Re-measured: September 2026  ·  Versions: SYX v4.28.0  ·  Shadcn UI (2026 registry)  ·  Tailwind CSS 4.3  ·  Chakra UI 3.36  ·  Bootstrap 5.3.8  ·  Material UI 9  ·  Ant Design 6

The previous version of this page scored SYX v4.2.0 against Material UI v6 and Ant Design v5 in April 2026, and kept those scores after both shipped a new major. That is fixed here: MUI v9 and Ant Design v6 are scored, and three criteria were added. Scores are a dated snapshot, not a live ranking.

Measured: what SYX actually is

Nothing in this table is an estimate or a round number. Each row names the command that produces it, against SYX v4.28.0.

Claim Measurement Where it comes from
Weight of a theme bundle 42.5 – 50.1 kB gzipped
262–348 kB raw · 34.0–38.1 kB brotli · 7 themes		 gzip -9 over css/styles-theme-*.css
Runtime dependencies 0
0 peer dependencies · 7 devDependencies, none shipped		 package.json → dependencies: {}
Client-side JavaScript in the package 0 bytes
the JS that ships is Node tooling — the MCP server and the validators. This documentation site loads 9.5 kB of its own, which is the site's, not the system's		 package.json → files[]
!important in shipped CSS 0 — across all 7 themes npm run validate (rule R02)
Cascade control 7 named layers, 53 @layer blocks
reset · base · tokens · atoms · molecules · organisms · utilities		 css/styles-theme-syx-sketch.css
Component inventory 26 — 19 atoms, 6 molecules, 1 organism component-registry.json, generated from source and arbitrated against the compiled CSS
Tokens per theme 1,088 — 233 primitive, 166 semantic, 630 component, 59 other contracts/resolved-tokens.json
Source size 186 SCSS files · 16,809 lines scss/
Agentic surface 11 MCP tools · 9 modes · 5 workflows · 16 guards scripts/mcp-server.js, _agents/, package.json scripts
Contrast, reference theme 14 / 14 text pairs pass WCAG AA
worst case 6.76:1 · syx-sketch, light and dark		 WCAG 2.1 relative luminance over the resolved tokens
Contrast, the six demo themes 45 / 84 pass — 39 failures
worst case 1.14:1, white on near-white		 Same measurement. See Where SYX loses.
Browser floor Chrome 111 · Safari 16.2 · Firefox 121
set by color-mix() (50 uses) and :has(). The two newest features used — relative colour and subgrid — sit behind @supports with a fallback, so they raise nothing		 Feature scan of the compiled CSS, counting only what is not guarded

What is deliberately absent. There are no kilobyte figures for the other six systems on this page. A bundle size for Tailwind, MUI or Ant Design depends entirely on what you import and how you build, so any single number would be a number chosen to win. The size comparison that is fair — does the system require a JavaScript runtime at all — is criterion 7, and it is scored, not invented.

The fourteen criteria

Three criteria are new: ecosystem & support, interactive behaviour and browser floor. They were added because SYX scores 1, 1 and 2 on them, and a comparison whose author only measured what he wins is not a comparison. Each row says what a 5 and a 1 mean, so the score can be argued with.

Criterion Evidence 5 means 1 means
1. Frontend architecture Measured Explicit cascade control, no specificity hacks in shipped output, dependency count near zero Specificity managed by ordering and luck; deep dependency tree
2. Agnosticism & integration Checkable Drops into any HTML from any language with a stylesheet link Requires one specific JS framework to render anything
3. Styling architecture Judged Multi-tier token system, themable without touching component code, dark mode as a first-class dimension Hard-coded values, theming by overriding
4. Ready-made UI Checkable Data grids, date pickers, comboboxes, the long tail — all present Primitives only; anything complex is yours to build
5. Art direction Judged No default look survives customisation; the system does not sign the design Recognisable at a glance as that library
6. Technical debt Judged Upgrades are not forced by someone else's release cycle; no transitive vulnerability surface Majors break the UI layer; upgrades are projects
7. Performance & SEO Measured Renders with zero JavaScript; server-rendered HTML is the normal case, not a mode Styling requires a JS runtime at render time
8. Accessibility Measured Accessible behaviour ships with the components, contrast is enforced by a guard, not by care Accessibility is entirely the consumer's problem
9. Override friction Measured Your CSS wins by design, without escalating specificity !important is the documented answer
10. Learning curve Judged A competent developer ships something correct on day one Weeks before output stops fighting the system
11. AI-native workflow Measured An agent can query the system, be refused by it, and be told what to write instead — machine-checked An agent reads documentation and guesses
12. Ecosystem & support new Checkable Large contributor base, answers findable, people to hire who already know it One maintainer. If they stop, it stops.
13. Interactive behaviour new Checkable Modals, dropdowns, focus traps and keyboard handling ship working Ships appearance only; every behaviour is yours to write
14. Browser floor new Measured Works on browsers several years old without a build step that back-ports Requires the newest engines to render correctly

The scores

1 (poor) to 5 (excellent) against the rubric above. The outlined cell is the highest score in that row.

Criterion Evidence SYX Shadcn UI Tailwind Chakra UI Bootstrap MUI Ant Design
1. Frontend architecture Measured 5 4 4 3 3 2 2
2. Agnosticism & integration Checkable 5 2 5 1 5 1 1
3. Styling architecture Judged 4 4 4 5 3 3 3
4. Ready-made UI Checkable 2 4 1 4 4 5 5
5. Art direction Judged 5 5 5 3 1 1 1
6. Technical debt Judged 5 4 3 4 3 3 3
7. Performance & SEO Measured 5 4 5 2 4 2 2
8. Accessibility Measured 3 5 2 5 4 4 4
9. Override friction Measured 5 4 4 3 2 1 1
10. Learning curve Judged 3 3 4 4 5 3 2
11. AI-native workflow Measured 5 4 3 2 2 2 2
12. Ecosystem & support Checkable 1 4 5 4 5 5 4
13. Interactive behaviour Checkable 1 5 1 5 4 5 5
14. Browser floor Measured 3 3 4 4 5 4 4
Total / 70 52 55 50 49 50 41 39

What changed against the April 2026 version

SYX's accessibility score went from 4 to 3 because the contrast measurement below contradicted it, and its learning curve from 4 to 3 because 16,809 lines of SCSS, nine agent modes and eight contract rules are not a four. Ant Design rose from 21 to 39 and Material UI from 28 to 41, mostly because they were being scored at versions two majors old and because the three new criteria are criteria they win. Under the old eleven criteria SYX scored 89.1% of the maximum; under these fourteen it scores 74.3%.

One correction already made to this page. The first version of it scored SYX 2 on browser floor and claimed a Chrome 119 floor, because the feature scan counted oklch(from …) without checking that it sits inside an @supports block with a fallback. It does. The real floor is Chrome 111, the score is 3, and the total moved from 51 to 52. The error is recorded here rather than quietly fixed, because a page arguing for measurement should show what happens when a measurement is wrong.

And one more, because the page changed what it measures — twice. The CSS behind this page used to live in a <style> block inside it — a scoring scale, a ranking list, an evidence tag and a comparison card, none of them in the system they were arguing for. First they became four real components (atom-score, atom-evidence, mol-ranking, mol-compare-card) with their tokens in the token layer. Then honesty cut the other way: they only ever served this page, so they now live in scss/site/ — the site layer, outside the registry — and the inventory reads 26 because a system should not count its own advertising as product. Same tokens, same pipeline, same contracts; just not sold as components.

The unweighted total

Sum of the fourteen scores, out of 70. Every criterion counts the same.

1st place

Shadcn UI

55/ 70

Loses only on framework lock-in — and wins everywhere that ready-made, accessible behaviour counts.

  1. 2 SYX 52 / 70
  2. 3 Tailwind CSS 50 / 70
  3. 3 Bootstrap 50 / 70
  4. 5 Chakra UI 49 / 70
  5. 6 Material UI 41 / 70
  6. 7 Ant Design 39 / 70

Why this number is the weakest thing on the page

An unweighted total assumes all fourteen criteria matter equally. No team has ever decided that way. A government service and a seed-stage React product do not weight ready-made UI and browser floor the same, and the ranking flips completely depending on which one you are. It is published here because hiding it would be worse — but the section below is the one to read.

Weighted by profile

The same fourteen scores, with each criterion weighted 0–3 for six kinds of project. The weights are published — a weighted ranking whose weights are hidden is worse than an unweighted one, because it buries the decision instead of making it. SYX comes first in four of these and last in two.

Legacy & server-rendered

JSP · PHP · .NET · Rails — the browser is modern, the server is not

SYX leads this profile.

  1. 1 SYX 3.87 / 5
  2. 2 Shadcn UI 3.77 / 5
  3. 3 Tailwind 3.70 / 5
  4. 3 Bootstrap 3.70 / 5
  5. 5 Chakra UI 3.43 / 5
  6. 6 MUI 2.83 / 5
  7. 7 Ant Design 2.70 / 5

Weights, criteria 1–14

3 · 3 · 2 · 2 · 1 · 3 · 2 · 2 · 3 · 2 · 1 · 2 · 1 · 3

React product under time-to-market pressure

Ship the admin panel this quarter

SYX comes 7th of 7 here.

  1. 1 Shadcn UI 4.08 / 5
  2. 2 Chakra UI 3.88 / 5
  3. 3 Bootstrap 3.77 / 5
  4. 4 MUI 3.46 / 5
  5. 5 Tailwind 3.27 / 5
  6. 6 Ant Design 3.23 / 5
  7. 7 SYX 3.19 / 5

Weights, criteria 1–14

2 · 0 · 2 · 3 · 1 · 2 · 2 · 2 · 1 · 3 · 1 · 3 · 3 · 1

Multi-brand & white-label

One codebase, many identities, rebranded per client

SYX leads this profile.

  1. 1 SYX 4.14 / 5
  2. 2 Shadcn UI 3.96 / 5
  3. 3 Tailwind 3.75 / 5
  4. 4 Chakra UI 3.43 / 5
  5. 5 Bootstrap 3.25 / 5
  6. 6 MUI 2.57 / 5
  7. 7 Ant Design 2.50 / 5

Weights, criteria 1–14

2 · 2 · 3 · 1 · 3 · 3 · 2 · 2 · 3 · 1 · 2 · 1 · 1 · 2

Public sector & regulated accessibility

Conformance is audited by someone who is not you

SYX comes 7th of 7 here.

  1. 1 Bootstrap 4.16 / 5
  2. 2 Shadcn UI 3.88 / 5
  3. 3 Chakra UI 3.80 / 5
  4. 4 MUI 3.52 / 5
  5. 5 Tailwind 3.36 / 5
  6. 6 Ant Design 3.32 / 5
  7. 7 SYX 3.12 / 5

Weights, criteria 1–14

1 · 2 · 1 · 2 · 0 · 2 · 2 · 3 · 1 · 2 · 0 · 3 · 3 · 3

Codebase driven mostly by AI agents

The main author of the CSS is not a person

SYX leads this profile.

  1. 1 SYX 4.16 / 5
  2. 2 Shadcn UI 3.92 / 5
  3. 3 Tailwind 3.56 / 5
  4. 4 Chakra UI 3.36 / 5
  5. 5 Bootstrap 3.28 / 5
  6. 6 MUI 2.60 / 5
  7. 7 Ant Design 2.52 / 5

Weights, criteria 1–14

3 · 2 · 2 · 1 · 1 · 3 · 1 · 2 · 3 · 1 · 3 · 1 · 1 · 1

Content site where SEO decides

Time to first byte is the product

SYX leads this profile.

  1. 1 SYX 4.04 / 5
  2. 2 Tailwind 3.89 / 5
  3. 3 Shadcn UI 3.81 / 5
  4. 4 Bootstrap 3.59 / 5
  5. 5 Chakra UI 3.26 / 5
  6. 6 MUI 2.59 / 5
  7. 7 Ant Design 2.48 / 5

Weights, criteria 1–14

2 · 3 · 1 · 1 · 3 · 2 · 3 · 2 · 2 · 2 · 1 · 1 · 1 · 3

Where a weighted average still lies

A weight expresses how much something matters. It cannot express a hard constraint. In the legacy profile SYX leads at 3.87 and Shadcn UI follows at 3.77 — a gap of a tenth, which reads as a close race. It is not one: if the stack cannot run React, Shadcn UI is not a near miss, it is unavailable, and so are Chakra UI, Material UI and Ant Design. Four of the seven systems here disqualify themselves before scoring begins, and no weighting can show that. Read every number on this page as arithmetic, not as advice.

Where SYX loses

Five reasons not to use it, with the measurement behind each.

Contrast in the demo themes

Of 98 text colour pairs measured across 7 themes × 2 modes, 39 fail WCAG AA. All 39 are in the six example-* demonstration themes, which ship in the package and were never contrast-audited. The worst is a filled tertiary button in example-06 light: white text on #c9faf6, 1.14:1 — effectively invisible. The reference theme syx-sketch passes 14 of 14, worst case 6.76:1.

This is why criterion 8 scores 3, not 4. No guard enforces contrast; npm run validate checks R01–R07 and none of them is about colour.

No interactive behaviour

SYX ships zero bytes of client-side JavaScript. That is the reason it scores 5 on performance and 1 on interactive behaviour: a modal that traps focus, a dropdown that handles arrow keys, a combobox that announces itself to a screen reader — none of that exists here. You write it, and you get its accessibility right yourself.

Shadcn UI, Chakra UI, MUI and Ant Design all score 5 here, and they deserve it.

One maintainer

Ecosystem and support scores 1. There is one author, no contributor base, no Stack Overflow tag, no pool of developers who already know it, and no answer to “what happens if he stops” other than the MIT licence and 16,809 readable lines.

For a system whole products are built on, this is a real risk and not a rhetorical one.

A modern browser floor

The floor is Chrome 111 · Safari 16.2 · Firefox 121, set by color-mix() (50 uses) and :has(). oklch() appears 289 times. There is no fallback build for any of it: on an older engine the colours do not degrade, they fail.

The two newest features — relative colour and subgrid — are the ones handled properly, behind @supports with a fallback. Everything else is assumed. On the legacy stacks SYX claims to serve the server may be old, but the browser cannot be. Bootstrap scores 5 here; SYX scores 3.

38 components

19 atoms, 6 molecules, 1 organism. There is no data grid, no date picker, no combobox, no virtualised table, no file upload. Ant Design and Material UI have all of them and score 5 on ready-made UI; SYX scores 2.

If your product is an admin panel, this is the paragraph that decides it.

Not a small system to learn

16,809 lines of SCSS across 186 files, 1,088 tokens per theme, a four-tier token cascade, eight contract rules, nine agent modes and eleven MCP tools. The pay-off is that an agent can be told no by a machine instead of by a reviewer — but the surface a human has to hold is not small.

Bootstrap scores 5 on learning curve. SYX scores 3, down from 4 in the previous version of this page.

System by system

What each one is good and bad at, and — the part that actually decides a choice — the kind of business, stack and team it fits. Several of these “choose something else” lines are not preferences but gates: four of the seven systems here cannot be installed at all without React.

SYX Design System

Strengths

Zero runtime dependencies and zero client-side JavaScript; 42.5–50.1 kB gzipped per theme; specificity solved by seven named @layers with 0 !important in shipped CSS; drops into any server-rendered HTML; the only system here an agent can query, be refused by, and be corrected by.

Weaknesses

26 components and no interactive behaviour at all; one maintainer; requires Chrome 111 / Safari 16.2; the six demo themes fail WCAG AA in 39 of 84 measured text pairs.

Reach for it when

A product sold to several clients under their own brands — a banking portal, a booking engine, a school platform — where rebranding is swapping one CSS file, not a release. A Rails, Laravel, Django, .NET MVC or JSP application that renders HTML on the server and has no route to React. A content or commerce site where time to first byte is the business. A team of one to three people who cannot afford anyone else’s upgrade cycle. A codebase where an agent writes most of the CSS and needs a machine, not a reviewer, to tell it no.

Choose something else when

An admin console that needs a data grid, a date range picker and a combobox in week one. Any team that has to hire people who already know the system. A public service whose accessibility conformance is audited by someone else, because the accessible behaviour is not here to audit. A corporate estate locked to old browsers. Any organisation that needs a vendor to call.

Shadcn UI

Strengths

Accessible behaviour ships working (Radix/Base UI primitives); you own the component code outright, so there is no library to be blocked by; strong 2026 registry and first-class agent tooling.

Weaknesses

React only — official support covers no other framework, which removes it entirely from server-rendered stacks; carries Tailwind as a hard dependency; every project owns a copy, so fixes do not arrive by upgrading.

Reach for it when

A React or Next.js product being built now by a team that wants to move fast and still own what it ships. A startup where the design will change ten times and nobody wants to fight a library to change it. Anywhere Tailwind is already the house style.

Choose something else when

Any stack that is not React — this is a gate, not a drawback. An organisation with many products that wants one fix to reach all of them: everybody owns a copy, so patches are a migration. A shop where Tailwind is ruled out by policy or taste.

Tailwind CSS

Strengths

No framework requirement and no runtime; production CSS is small because unused utilities never ship; enormous ecosystem; total design freedom.

Weaknesses

Markup carries the design, so refactoring means editing every element that used it; governance is a convention, not a mechanism; ships no components and no behaviour.

Reach for it when

Agencies and studios shipping many sites that must not look alike. Marketing and campaign pages with a short life and a strong art direction. Any backend language, since the output is only CSS. Small teams with tight design review, where the convention holds because everyone is in the room.

Choose something else when

A large team without design governance: the system drifts and nothing stops it. Templates edited by many hands across years, where the design lives in markup nobody dares refactor. A team that expected components — there are none, and behaviour is entirely yours.

Bootstrap

Strengths

The lowest learning curve here and by far the largest pool of developers who already know it; the CSS works without its JavaScript; supports the oldest browsers of any system on this page.

Weaknesses

Overriding it is a fight, and !important is still the common answer; the default look is recognisable at a glance; CSS-variable theming arrived late and is partial.

Reach for it when

Internal tools, intranets and back offices where working beats distinctive. Public administration and any estate with old browsers and long procurement. Teams with rotating contractors, because the onboarding cost is close to zero. Prototypes that must exist on Friday.

Choose something else when

A consumer product whose brand is the argument — the default look shows through everything, and removing it costs more than starting elsewhere. Any team that will spend its time overriding rather than building.

Chakra UI

Strengths

Excellent token model and one of the best accessibility stories here; v3 was a ground-up rewrite with recipes and Ark UI, and it shows.

Weaknesses

React only; v3 deliberately kept Emotion to preserve dynamic styling, so styling still costs at runtime — the zero-runtime path is Panda, which is a different product.

Reach for it when

React B2B SaaS and dashboards where accessibility matters and the styling happens behind a login, so a runtime cost is affordable. Teams that value developer experience and a real token model over raw delivery speed.

Choose something else when

Anything not React. Public, SEO-driven pages where styling at runtime is paid on every first render. A team that specifically needs zero-runtime styling — that road is Panda, which is a different product with a different migration.

Material UI

Strengths

The most complete component set on this page, battle-tested at scale, with data-grid and date tooling that nothing else here matches; v9 is current and actively developed.

Weaknesses

React only; heavy; the Material look resists removal, so bespoke art direction fights the library the whole way; overriding it is the hardest of the seven.

Reach for it when

Enterprise React applications with a long component tail — scheduling, reporting, back-office CRUD. Teams that would rather buy the data grid than build it, and that can use commercial support. Products where looking like Material is neutral or wanted.

Choose something else when

Brand-led consumer design: you will fight the library from the first screen to the last. Marketing sites and anything measured on load. Small teams, who pay the full weight and use a fraction of it.

Ant Design

Strengths

Data-dense components — tables, filters, forms — are its reason to exist and it is very good at them; v6 improved CSS-variable support and React 19 compatibility.

Weaknesses

React only; the strongest visual signature of any system here; the heaviest to make look like something else; the largest surface to learn.

Reach for it when

Data-dense back offices: fintech consoles, logistics and operations panels, internal ERP-style tools where a table with thirty columns, filters and bulk actions is the actual product. Strong fit in the ecosystems where it is already the default.

Choose something else when

Consumer-facing brand work — the visual signature is the strongest here and the most expensive to remove. Public marketing pages. Any team that needs a small bundle or a short learning curve.

Sources and versions

Checked September 2026. Every “checkable” claim on this page resolves to one of these.

System Version scored Requires a JS framework? Ships runtime JS?
SYX 4.28.0 No — a stylesheet link No
Shadcn UI 2026 registry, Tailwind v4 + React 19 Yes — React Yes
Tailwind CSS 4.3 No No
Chakra UI 3.36 Yes — React Yes — v3 kept Emotion, so styling stays partly at runtime
Bootstrap 5.3.8 No Optional — the CSS works alone; the components need its JS
Material UI 9 Yes — React Yes
Ant Design 6 Yes — React Yes