chakra-ui/chakra-ui
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
More findings
Verdict
A well-structured swatch component that only works for sighted users on the happy path. The biggest risk is a component that literally crashes the tree instead of adapting to real-world data.
Files Rams reviewed
sandbox/react-router/app/components/ui/color-mode.tsx
sandbox/react-router/app/components/ui/toaster.tsx
sandbox/react-router/app/components/ui/tooltip.tsx
apps/www/app/blog/[slug]/page.tsx
apps/www/app/blog/page.tsx
apps/www/app/docs/[...slug]/page.tsx
apps/www/app/guides/[slug]/page.tsx
apps/www/app/guides/page.tsx
apps/www/app/launch-week/page.tsx
apps/www/app/layout.tsx
apps/www/app/page.tsx
apps/www/app/playground/page.tsx
apps/www/app/shipped/[slug]/page.tsx
apps/www/app/shipped/page.tsx
apps/www/app/showcase/page.tsx
sandbox/next-app/app/dialog-repro/page.tsx
sandbox/next-app/app/page.tsx
packages/react/src/components/color-picker/index.tsx
packages/react/src/components/color-swatch/index.tsx
sandbox/react-router/app/components/ui/provider.tsx
sandbox/remix-ts/app/components/chakra-provider.tsx
sandbox/remix-ts/app/components/color-mode-toggle.tsx
apps/www/app/blog/layout.tsx
apps/www/app/docs/layout.tsx
apps/www/app/guides/layout.tsx
apps/www/app/playground/layout.tsx
apps/www/app/props/page.tsx
apps/www/app/shipped/layout.tsx
apps/www/app/showcase/layout.tsx
packages/react/src/components/absolute-center/absolute-center.tsx
Accessibility
packages/react/src/components/color-swatch/index.tsx:33
Color swatch conveys meaning through color alone with no accessible name
The <chakra.span> in ColorSwatch renders purely via a CSS custom property (`--color: value`) and a `data-value` attribute. There is no `aria-label`, `role="img"`, or visible text anywhere in the component. A screen reader lands on this element and announces nothing about which color it represents.
Why it matters
Screen reader users lose all information the swatch is meant to convey, so any UI that relies on ColorSwatch to communicate a selected or available color (palette pickers, theme selectors) becomes unusable for that audience.
Fix
Give every color swatch an accessible name derived from its value, such as `aria-label={value}` or `role="img"` with a descriptive label.
<chakra.span
{...localProps}
ref={ref}
data-value={value}
css={[styles, { "--color": value }, props.css]}
className={cx(className, props.className)}
/><chakra.span
{...localProps}
ref={ref}
data-value={value}
role="img"
aria-label={value}
css={[styles, { "--color": value }, props.css]}
className={cx(className, props.className)}
/>UX
packages/react/src/components/color-swatch/index.tsx:60
ColorSwatchMix throws and crashes the tree on more than 4 items
ColorSwatchMix checks `items.length > 4` and calls `throw new Error("ColorSwatchMix doesn't support more than 4 colors")` directly in the render path, with no error boundary shown in this file and no fallback UI.
Why it matters
A consumer passing 5 colors, whether from a CMS field or user-generated palette, takes down the entire surrounding component tree instead of the swatch degrading gracefully, turning a data-input mistake into a full page crash.
Fix
Clamp or truncate the items array to the supported maximum instead of throwing during render.
if (items.length > 4) {
throw new Error("ColorSwatchMix doesn't support more than 4 colors")
}const visibleItems = items.slice(0, 4)Typography
Color
Spacing
Components
Motion
Craft
Working well
- ColorSwatchMix handles the 3-color layout edge case cleanly: `isThreeColors && isLast` spans the last swatch across both grid columns instead of leaving an awkward gap, which is the right way to keep an odd count visually balanced without extra markup.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 29, 2026: 96/100. This rescore on v0.0.3: 96/100.
This page is an automated design review of chakra-ui/chakra-ui’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
