tailwindlabs/headlessui
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
Low
Design risk in this codebase.
More findings
Verdict
A near-clean layout file undone by one third-party font request that stalls first paint everywhere. Fix the CDN dependency once and the whole app inherits the win.
Files Rams reviewed
packages/@headlessui-react/src/components/button/button.tsx
packages/@headlessui-react/src/components/checkbox/checkbox.tsx
packages/@headlessui-react/src/components/data-interactive/data-interactive.tsx
packages/@headlessui-react/src/components/description/description.tsx
packages/@headlessui-react/src/components/field/field.tsx
packages/@headlessui-react/src/components/fieldset/fieldset.tsx
packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
packages/@headlessui-react/src/components/input/input.tsx
packages/@headlessui-react/src/components/label/label.tsx
packages/@headlessui-react/src/components/legend/legend.tsx
packages/@headlessui-react/src/components/portal/portal.tsx
packages/@headlessui-react/src/components/select/select.tsx
packages/@headlessui-react/src/components/switch/switch.tsx
packages/@headlessui-react/src/components/textarea/textarea.tsx
packages/@headlessui-react/src/components/tooltip/tooltip.tsx
playgrounds/react/app/[...slug]/page.tsx
playgrounds/react/app/layout.tsx
playgrounds/react/app/page.tsx
playgrounds/vue/src/components/Home.vue
playgrounds/vue/src/components/combinations/form.vue
playgrounds/vue/src/components/combinations/tabs-in-dialog.vue
playgrounds/vue/src/components/combobox/_virtual-example.vue
playgrounds/vue/src/components/combobox/combobox-countries.vue
playgrounds/vue/src/components/combobox/combobox-open-on-focus.vue
playgrounds/vue/src/components/combobox/combobox-virtual-with-empty-states.vue
playgrounds/vue/src/components/combobox/combobox-virtualized.vue
playgrounds/vue/src/components/combobox/combobox-with-pure-tailwind.vue
playgrounds/vue/src/components/combobox/command-palette-with-groups.vue
playgrounds/vue/src/components/combobox/command-palette.vue
playgrounds/vue/src/components/combobox/multi-select.vue
Typography
playgrounds/react/app/layout.tsx:12
Inter font loaded from third-party CDN delays first text paint
The <link rel="stylesheet" href="https://rsms.me/inter/inter.css" /> pulls the Inter font from an external domain rather than being self-hosted or bundled through next/font. This forces a DNS lookup and connection to rsms.me before the CSS (and then the font file itself) can download, on top of whatever connection is already open to the app's own origin.
Why it matters
Text renders later or flashes with a fallback font while the extra round-trip to a third-party host completes, and the page also takes an availability dependency on rsms.me staying up.
Fix
Self-host the Inter font (e.g. via next/font/google or a local font file) instead of linking a third-party stylesheet.
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />// Use next/font instead of an external <link>:
// import { Inter } from 'next/font/google'
// const inter = Inter({ subsets: ['latin'] })
// then apply inter.className to <html> or <body>Accessibility
Color
Spacing
Components
Motion
UX
Craft
Working well
- Wrapping LayoutChrome in <Suspense> at the root is a reasonable pattern: it lets layout chrome stream independently from page content instead of blocking the whole tree on one slow child.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 29, 2026: 98/100. This rescore on v0.0.3: 98/100.
This page is an automated design review of tailwindlabs/headlessui’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.
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.
