Every framework fails accessibility
Bootstrap buttons are 32px. Tailwind counts transitions as animations. shadcn dialogs don't trap focus. We fix all of it.
Touch targets too small
Bootstrap's .btn-sm is 32px. WCAG requires 44px minimum. One in five users can't reliably tap your buttons.
✓ cbrowser-ui enforces 44px on everything interactive
Animations ignore preferences
Tailwind's animate-* classes run regardless of prefers-reduced-motion. Some users get nauseous.
✓ cbrowser-ui pauses all motion by default
Contrast that fails AAA
Bootstrap's .text-muted is 4.6:1 — fails WCAG AAA. Tailwind's gray-400 on white? 3.0:1 — fails even AA.
✓ cbrowser-ui guarantees 7:1 on all text
Focus rings get hidden
Tailwind's focus:outline-none is used on 90% of components. Keyboard users can't see where they are.
✓ cbrowser-ui makes focus always visible
Three ways to use it
Patch your framework, replace it, or install from npm.
Patch your framework
One line. Zero migration. Your site passes accessibility audits.
<link rel="stylesheet"
href="https://cdn.cbrowser.ai/fix-bootstrap.css">
Also: fix-tailwind.css · fix-shadcn.css · fix-material.css
Use as your framework
Replace Bootstrap or Tailwind entirely. Beautiful by default.
href="https://cdn.cbrowser.ai/ui.css">
<script type="module"
src="https://cdn.cbrowser.ai/ui.mjs"></script>
npm install
For build systems. Import what you need.
// ESM
import 'cbrowser-ui/css';
import { FocusTrap } from 'cbrowser-ui';
Everything you need, accessible by default
Every component scores 100 on CIF. Copy the HTML.
Buttons
Form
Alerts
Badges
Progress
72% complete
Table
| Framework | Size | Touch Targets | Motion Safe | Contrast |
|---|---|---|---|---|
| Bootstrap 5 | 25kb | ✗ 32px buttons | ✗ No support | AA only |
| Tailwind CSS | ~15kb | ✗ No minimum | ✗ Partial | ✗ gray-400 fails |
| shadcn/ui | ~20kb | ✓ Configurable | ✗ Partial | AA |
| cbrowser-ui | 21kb | ✓ 44px enforced | ✓ Full support | AAA (7:1) |
Accordion
What is cbrowser-ui?
A CSS framework that makes any website accessible and beautiful. Use standalone or as a patch on top of Bootstrap, Tailwind, or shadcn.
Is it free?
Yes. MIT licensed, open source, free forever. The CDN is free too.
Does it work with React?
Yes. It's framework-agnostic CSS. Works with React, Vue, Svelte, plain HTML — anything.
Navigation
Breadcrumbs
Before and after — one file
Same Bootstrap site. One CSS file added. CIF score jumps 40+ points.
.btn-smis 32px — fails touch target.nav-linkis 36px — fails touch target.carouselignores motion preferences.text-mutedis 4.6:1 — fails AAA contrast- Links in body text are not underlined
- Focus rings removed by default
- All buttons enforced to 44px minimum
- Nav links padded to 44px with spacing
- Carousel respects prefers-reduced-motion
- Muted text boosted to 7:1 contrast
- Content links underlined by default
- Focus rings always visible on keyboard
20 variables. Infinite designs.
Override CSS custom properties. The entire design changes. Accessibility stays perfect.
:root {
--cui-primary: #7c3aed; /* purple */
--cui-primary-fg: #ffffff;
--cui-radius: 1rem; /* rounder */
--cui-font: 'Instrument Sans';
}
Every color combination is validated against WCAG AAA. The theme editor (coming soon) prevents you from picking colors that break contrast.
Accessible design is beautiful design.
Start with the patch for your framework. Or go all-in. Either way, every user can use your site.