Get started in 30 seconds
Three ways to add cbrowser-ui. Pick the one that fits your project.
Option 1: CDN Fastest
No build step. No install. Just two tags in your HTML.
<link rel="stylesheet" href="https://cdn.cbrowser.ai/ui.css">
<script type="module" src="https://cdn.cbrowser.ai/ui.mjs"></script>
The JS is optional — only needed for focus traps, keyboard navigation, and mobile menu toggle.
Option 2: npm
For build systems — React, Next.js, Vite, Astro, anything with a bundler.
npm install cbrowser-ui
Then import in your entry point:
// Import the CSS
import 'cbrowser-ui/css';
// Import JS utilities (optional)
import { FocusTrap, initArrowNav } from 'cbrowser-ui';
Option 3: Patch your existing framework
Already using Bootstrap, Tailwind, or shadcn? Add one line after your framework CSS. Nothing else changes.
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.cbrowser.ai/fix-bootstrap.css">
<!-- Tailwind CSS -->
<link rel="stylesheet" href="https://cdn.cbrowser.ai/fix-tailwind.css">
<!-- shadcn/ui -->
<link rel="stylesheet" href="https://cdn.cbrowser.ai/fix-shadcn.css">
Your first page
Copy this complete HTML file. It has everything: skip link, semantic landmarks, accessible navigation, labeled form, and proper heading hierarchy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Accessible Site</title>
<link rel="stylesheet" href="https://cdn.cbrowser.ai/ui.css">
<script type="module" src="https://cdn.cbrowser.ai/ui.mjs"></script>
</head>
<body>
<a href="#main" class="cui-skip-link">Skip to main content</a>
<header class="cui-header">
<a href="/" class="cui-header-logo">My Site</a>
<nav class="cui-header-nav" id="nav" aria-label="Main">
<a href="/" aria-current="page">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
<button class="cui-header-toggle"
aria-controls="nav" aria-expanded="false"
aria-label="Open menu">☰</button>
</header>
<main id="main" class="cui-container cui-section">
<h1>Welcome to My Site</h1>
<p>This page is fully accessible out of the box.</p>
<div class="cui-card cui-mt-2">
<h2>Contact Us</h2>
<form action="/contact" method="post">
<div class="cui-stack">
<div>
<label for="name">Name</label>
<input type="text" id="name" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" required>
</div>
<div>
<label for="message">Message</label>
<textarea id="message" rows="4"></textarea>
</div>
<button type="submit" class="cui-btn">Send</button>
</div>
</form>
</div>
</main>
<footer aria-label="Site footer"
style="border-top: 1px solid var(--cui-border);">
<div class="cui-container" style="padding: 2rem 0;">
<p class="cui-text-sm cui-text-muted">
© 2026 My Site. Built with cbrowser-ui.
</p>
</div>
</footer>
</body>
</html>
Customize the theme
Override any of the 20 CSS custom properties. Every color is AAA-contrast-safe in both light and dark mode.
:root {
/* Brand colors */
--cui-primary: #059669; /* emerald */
--cui-primary-fg: #ffffff;
--cui-primary-hover: #047857;
/* Shape */
--cui-radius: 0.75rem; /* rounder corners */
/* Typography */
--cui-font: 'Instrument Sans', sans-serif;
}
All CSS variables
| Variable | Default | Purpose |
|---|---|---|
--cui-bg | #ffffff | Page background |
--cui-fg | #0f172a | Text color |
--cui-muted | #64748b | Secondary text |
--cui-border | #e2e8f0 | Borders and dividers |
--cui-surface | #f8fafc | Card/surface background |
--cui-primary | #2563eb | Primary action color |
--cui-primary-fg | #ffffff | Text on primary |
--cui-primary-hover | #1d4ed8 | Primary hover state |
--cui-destructive | #dc2626 | Danger/delete actions |
--cui-success | #16a34a | Success states |
--cui-focus-ring | #2563eb | Focus outline color |
--cui-font | system-ui | Body font family |
--cui-font-mono | ui-monospace | Code font family |
--cui-text-base | 1rem | Base font size (16px) |
--cui-line-height | 1.6 | Body line height |
--cui-radius | 0.5rem | Border radius |
--cui-spacing | 1rem | Base spacing unit |
--cui-touch-min | 44px | Minimum touch target |
--cui-duration | 150ms | Transition duration |
--cui-easing | ease-out | Transition easing |
What you get
CSS Framework
Reset, typography, buttons, forms, cards, navigation, alerts, badges, tables, accordions, dialogs, progress bars, layout utilities.
21kb minified
JS Runtime
Focus traps, keyboard arrow navigation, mobile menu toggle, color scheme management, toast notifications, reduced motion detection.
5kb minified
Framework Patches
One-file fixes for Bootstrap 5, Tailwind CSS, shadcn/ui, and Material UI. Touch targets, contrast, motion, focus rings.
3-4kb each