chromium-ui-react

A React component library that looks and feels like Chromium itself.

Chromium-native UI primitives for building browser extensions, companion apps, and internal tools that feel like first-party Google surfaces — not yet another bespoke web dashboard.

→ Open the documentation site

_{Light/dark swap automatically based on your GitHub theme. Source HTML at docs/static/showcase/index.html — served at ztnkv.github.io/chromium-ui-react/showcase/index.html.}

---

Why this exists

Every time someone builds a browser extension popup, a side-panel UI, or a DevTools-adjacent tool, they face the same choice:

• Pull in Material Web and fight its aesthetic until it looks "close enough" to Chromium.
• Reach for shadcn / Radix / Mantine and accept that their extension will look like a generic React app wearing a browser.
• Hand-roll CSS from scratch, reinventing Chromium's palette, spacing, and interaction rules.

chromium-ui-react is the fourth option: actual Chromium styling, pre-wrapped in React components. Colors, spacing, typography, elevation, focus rings, dark mode — all mirror Chromium's internal cr_elements design system (the one used inside chrome://settings, chrome://bookmarks, side-panel UIs, and the rest of Chromium's WebUI surfaces).

It's built first and foremost for Chromium extension developers, but nothing about it is extension-specific — it works equally well in:

• Electron and Tauri apps that want a Google-adjacent feel
• Admin panels and internal tools for Chromium-adjacent products
• Web apps that complement Chromium (companion sites, onboarding flows)
• Docusaurus / Astro / Next.js sites where you want a native-browser aesthetic

Highlights

• 23 accessible React component families — Button, Input, Toggle, Dialog, Tabs, Menu, Toast, Table, ToggleRow, Header, and a drill-in PanelStack for native Chromium side-panel navigation
• Chromium-authentic design tokens — Google color palette (blue / green / red / yellow / grey), 4 / 8 / 12 / 16 px spacing scale, Roboto typography, cr_shared_vars.css-aligned elevation
• Automatic dark mode via prefers-color-scheme — no provider, no context, no setup
• Zero-runtime styling — plain CSS, no CSS-in-JS bundle bloat
• SSR-safe — works with Next.js, Remix, Astro, Docusaurus out of the box
• Tree-shakeable — ESM + CJS builds, import only what you use
• Strictly typed — ships with full .d.ts declarations
• LLM-ready documentation — every docs page has a Copy Markdown button, plus a dedicated One-page LLM doc designed to be pasted into a coding agent

Quick start

npm install chromium-ui-react

import 'chromium-ui-react/styles.css';
import { Button, Input, Card, CardBody } from 'chromium-ui-react';

export default function SignIn() {
  return (
    <Card>
      <CardBody>
        <Input label="Email" placeholder="you@example.com" />
        <Input label="Password" type="password" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
          <Button variant="action">Sign in</Button>
        </div>
      </CardBody>
    </Card>
  );
}

That's it. Dark mode works automatically; no context provider, no setup.

Full documentation lives in docs/ and is served as a Docusaurus site — see Running the docs locally.

Repository layout

This repository is a small npm workspaces monorepo:

.
├── packages/
│   └── chromium-ui-react/      # the published library (react + css)
├── docs/                        # Docusaurus 3 documentation site
│   ├── docs/                    # markdown pages
│   ├── plugins/raw-markdown/    # "Copy Markdown" plugin
│   └── src/theme/               # swizzled DocItem for Copy Markdown button
├── package.json                 # workspaces root
└── tsconfig.base.json           # shared TypeScript config

Running the docs locally

npm install
npm run dev:docs            # http://localhost:3000

Or to develop the library and the docs in parallel:

npm run dev                 # library (vite --watch) + docs site

Building

npm run build:lib           # bundle the library to packages/chromium-ui-react/dist
npm run build:docs          # build the static docs site to docs/build

LLM-friendly docs

Every documentation page has a Copy Markdown button in its header. Clicking it copies the raw source markdown for that page — perfect for pasting into ChatGPT, Claude, Cursor, or any coding agent that needs a focused reference for the component you're using.

In addition to the per-component pages, there's a dedicated One-page LLM doc that fits the entire library (tokens, every component, composition examples) into a single copy-pasteable document. Give it to an agent once and they can generate the rest of your extension UI from there.

Live site: ztnkv.github.io/chromium-ui-react

Browser support

Chrome, Edge, Brave, Arc, Opera, and any Chromium-based browser (v100+). Firefox and Safari work — the library uses standard CSS custom properties and modern DOM APIs — but the design is Chromium-native by intent, so visual parity on non-Chromium browsers is not a goal.

Contributing

Contributions, bug reports, and design feedback are welcome. Before opening a PR:

1. Check that your change matches the Chromium aesthetic — when in doubt, open chrome://settings or chrome://bookmarks for reference.
2. Keep the zero-runtime / plain-CSS rule. No styled-components, no emotion, no runtime theming engines.
3. If you're adding a component, mirror the existing packages/chromium-ui-react/src/components/<Name>/ layout: <Name>.tsx, <Name>.css, index.ts.
4. Add a documentation page under docs/docs/components/ following the template of the existing ones.

See CONTRIBUTING.md for more detail once it's written.

Authors

Built by Claude Opus 4.7, Denis Zhitnyakov, and contributors.

Most of the code, component implementations, and the documentation site in this repository were generated pair-programming with Anthropic's Claude Opus 4.7. Human-side direction, API decisions, and review by Denis Zhitnyakov. Additional contributors listed in the git history.

Acknowledgements

This library is an unofficial, community-built approximation of the design language used by the Chromium project. It is not affiliated with, endorsed by, or produced by Google or The Chromium Authors. "Chrome" and "Chromium" are trademarks of Google LLC.

Visual inspiration comes from:

• Chromium cr_elements — the source of truth for WebUI components
• cr_shared_vars.css — design tokens
• Material Web — Chromium shares lineage with Material

---

Licensed under the MIT License.