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 ties for first on the overall total, with Shadcn UI, at 55 of 70. 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: October 2026  ·  Versions: SYX v5.1.0  ·  Shadcn UI (2026 registry)  ·  Tailwind CSS 4.3.3  ·  Chakra UI 3.37  ·  Bootstrap 5.3.8  ·  Material UI 9.4  ·  Ant Design 6.6

April 2026 scored SYX v4.2.0 against Material UI v6 and Ant Design v5 and kept those scores after both shipped a new major; September fixed that and added three criteria. October re-measures SYX at 5.0.0 after three internal audits, and re-checks the other six at their current versions: none shipped a new major, so their scores stand. SYX’s own scores and the profile weights now live in contracts/why-syx.json, and the tables below are generated from it, so a score cannot change in one table and not in the others. 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 v5.1.0.

Claim Measurement Where it comes from
Weight of a theme bundle 51.3 – 59.0 kB gzipped
363–451 kB raw · 40.4–44.8 kB brotli · 7 themes, with the site layer (dist/, without it: 40.6–43.4 kB gzipped, 253–282 kB raw), as published (Prepros, minified). The reference theme is the heaviest because it also carries this site’s own layer		 gzip -9 and brotli 11 over css/styles-theme-*.css
Runtime dependencies in the browser 0
the package declares 2 Node dependencies, postcss and postcss-scss, used by the validator and the MCP server on the developer’s machine — nothing a page loads		 package.json → dependencies
Client-side JavaScript 0 bytes required · 11.6 kB gz optional
five small vanilla modules — tabs, menu (APG), tooltip, toast, character count — 28.9 kB raw, each loaded only where its component is used. Without them every component still renders; with them it behaves. The site’s mobile nav (4.9 kB) is the site’s, not the system’s		 js/syx-*.js, keyboard-tested in CI by tests/browser/interaccion.mjs
!important in shipped CSS 1 — on purpose
[hidden]{display:none !important} in the first layer, so the attribute hides any component: in @layer, an earlier layer’s !important beats every later one. Rule R02 allows it in that one file and nowhere else, and check:compilado enforces R02 on the compiled CSS, not just the source		 npm run check:compilado
Cascade control 7 named layers, 68 @layer blocks
reset · base · tokens · atoms · molecules · organisms · utilities		 css/styles-theme-syx-sketch.css
Component inventory 40 components — 23 atoms, 15 molecules, 2 organisms component-registry.json, generated from source and arbitrated against the compiled CSS
Tokens in the public contract 1,127 — 224 primitive, 226 semantic, 620 component, 57 other tokens.json, generated from the compiled CSS
Source size 221 SCSS files · 19,045 lines scss/
Agentic surface 12 MCP tools · 10 modes · 5 workflows · 39 guards
plus seven browser suites (axe in 7 themes × 2 modes and RTL, keyboard, focus, reflow, the four pages, hidden, visual regression) and a mutation suite that injects 35 known regressions and fails if any guard lets one through		 scripts/mcp-server.js, _agents/, package.json scripts
Contrast, all seven themes 3,304 / 3,304 measurements pass WCAG AA
118 text and UI pairs × 7 themes × light, dark and their states, enforced by npm run check:contraste. What it does not measure yet — the outline button’s hover and the site pages under the six demo themes — is in Where SYX loses		 npm run check:contraste
Browser floor Chrome 111 · Safari 16.2 · Firefox 121
set by color-mix() and :has(); 111 uses of newer features sit behind @supports with a fallback, so they raise nothing. The same floor is the browserslist in package.json, and npm run check:soporte fails the build if the compiled CSS needs more		 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 were added in September: ecosystem & support, interactive behaviour and browser floor. They were added because SYX scored 1, 1 and 3 on them, and a comparison whose author only measured what he wins is not a comparison. In October it scores 1, 3 and 3. 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 3 4 1 4 4 5 5
5. Art direction Judged 5 5 5 3 1 1 1
6. Technical debt Judged 4 4 3 4 3 3 3
7. Performance & SEO Measured 5 4 5 2 4 2 2
8. Accessibility Measured 4 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 3 5 1 5 4 5 5
14. Browser floor Measured 3 3 4 4 5 4 4
Total / 70 55 55 50 49 50 41 39

What changed in October 2026

SYX moves from 52 to 55, on four criteria, and each move names its evidence. Ready-made UI, 2 → 3: 40 components now include tooltip, toast, menu, dialog, tabs, progress, skeleton, avatar, card and an app shell — still no combobox, drawer, data grid or date picker, which is why it is not a 4. Accessibility, 3 → 4: contrast is now enforced by a guard (3,304 measurements, 0 below AA, all seven themes) and axe, keyboard and focus tests run in CI on every component — but forced-colors mode and WCAG 2.4.11 still fail, measured, so not a 5. Interactive behaviour, 1 → 3: five optional vanilla modules give tabs, an APG menu button, tooltips that meet 1.4.13 and a live-region toast, and the dialog is native <dialog> with its focus trap; there is no combobox, drawer or generic popover yet. And one goes down: technical debt, 5 → 4, because 5.0.0 is itself a breaking release — legacy variables and physical utilities removed — so moving off 4.x is now a migration, with a guide, but a migration. The other six systems are re-checked at their current versions and keep their scores; none shipped a new major since September.

Read the tie with suspicion. SYX now ties Shadcn UI for first on the unweighted total. The author of SYX scored SYX, and three of the four moves are on criteria where the evidence is SYX’s own test suite. A tie decided by a self-assessment is not a win; the profiles below, where the weights are explicit, are the honest answer.

Earlier, in September. Accessibility went from 4 to 3 and learning curve from 4 to 3; 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.

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 they are not counted in the 40, 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 (tied)

SYX · Shadcn UI

55/ 70

Tied on 55. The total cannot separate them — the weighted profiles below can, and they disagree.

  1. 3 Tailwind CSS 50 / 70
  2. 3 Bootstrap 50 / 70
  3. 5 Chakra UI 49 / 70
  4. 6 Material UI 41 / 70
  5. 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 is never last.

Legacy & server-rendered

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

SYX leads this profile.

  1. 1 SYX 3.97 / 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 4th 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 SYX 3.54 / 5
  5. 5 MUI 3.46 / 5
  6. 6 Tailwind 3.27 / 5
  7. 7 Ant Design 3.23 / 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.21 / 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 5th 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 SYX 3.48 / 5
  6. 6 Tailwind 3.36 / 5
  7. 7 Ant Design 3.32 / 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.24 / 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.15 / 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.97 and Shadcn UI follows at 3.77 — a gap of two tenths, 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

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

Accessibility gaps, measured

Contrast is guarded now — but three things fail and no test catches them yet. In forced-colors mode (Windows high contrast) the mask icons and the mobile menu button disappear. With a sticky header, keyboard focus can end up fully hidden under it (WCAG 2.4.11): seven controls in the docs at 375 px. And the outline button’s hover state drops below AA in all seven themes, as low as 2.42:1, because the contrast guard does not measure that pair.

This is why criterion 8 scores 4 and not 5. Shadcn UI and Chakra UI score 5, and they deserve it.

Behaviour is thin

Five optional modules — tabs, menu, tooltip, toast, character count — and a native <dialog>. That covers the common overlays, keyboard-tested in CI. It does not cover a combobox, a drawer, a generic popover, a date picker or a sortable table: those you write, and you get their accessibility right yourself.

Interactive behaviour scores 3. Shadcn UI, Chakra UI, MUI and Ant Design score 5.

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 18,669 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() and :has(). At that floor two things degrade quietly: right-to-left mirroring needs :dir(), which Chrome only shipped in 120, and a dialog’s backdrop colour needs custom properties on ::backdrop, which arrived in Chrome 122.

Relative colour and subgrid are handled properly, behind @supports with a fallback. Bootstrap scores 5 here; SYX scores 3.

40 components

23 atoms, 15 molecules, 2 organisms. There is no data grid, no date picker, no combobox, no drawer, no virtualised table, no file upload. Ant Design and Material UI have all of them and score 5 on ready-made UI; SYX scores 3.

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

Not a small system to learn

19,045 lines of SCSS across 221 files, 1,127 tokens in the public contract, a four-tier token cascade, eleven contract rules, ten agent modes, twelve MCP tools and 39 guards. 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.

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 browser dependencies and no JavaScript required to render; 49–56 kB gzipped per theme; specificity solved by seven named @layers, with a single, deliberate !important; drops into any server-rendered HTML; contrast in all seven themes enforced by a guard; the only system here an agent can query, be refused by, and be corrected by — with the rules checked on the compiled CSS, not just the source.

Weaknesses

40 components and thin behaviour — five optional modules, no combobox or drawer; one maintainer; requires Chrome 111 / Safari 16.2; forced-colors mode and WCAG 2.4.11 still fail, measured; 5.0.0 is a breaking release for anyone on 4.x.

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, until forced-colors and focus-obscured are fixed. 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 October 2026 (versions from the npm registry). Every “checkable” claim on this page resolves to one of these.

System Version scored Requires a JS framework? Ships runtime JS?
SYX 5.0.0 No — a stylesheet link Optional — five vanilla modules, 11.6 kB gz; the CSS works alone
Shadcn UI 2026 registry (CLI 4.21), Tailwind v4 + React 19 Yes — React Yes
Tailwind CSS 4.3.3 No No
Chakra UI 3.37 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.4 Yes — React Yes
Ant Design 6.6 Yes — React Yes