Documentation

A token-driven, accessible UI library with GNOME-inspired Ubuntu Orange theming for modern React applications.

gnome-ui is a component library built on Base UI with GNOME's Ubuntu Orange design language. It provides accessible, unstyled primitives with a production-ready token system — no magic classes, no overrides.

Explore the docs

Component catalog

Browse all 40+ components with live previews and code examples.

Theming and tokens

CSS variables, Ubuntu fonts, and the orange token system.

Technical guide

Architecture contracts, accessibility rules, and delivery strategy.

Installation

npm i gnome-ui

Quick start

Import each component directly from its entry point:

import { Button } from "gnome-ui/button";
import { Dialog } from "gnome-ui/dialog";
import { Input } from "gnome-ui/input";

export function Example() {
  return <Button>Save changes</Button>;
}

Design principles

Principle	Description
Tokens first	Color, typography, and states are defined as CSS variables. No hardcoded values.
Explicit composition	Complex components use `Root`, `Trigger`, `Content` parts for predictable APIs.
Accessibility by default	Keyboard support, visible focus, and WAI-ARIA roles from the foundation layer.
Living docs	API changes are always reflected in examples and component contracts.

Core technology

Base UI — headless, unstyled React primitives
Tailwind CSS v4 — utility-first styling with OKLCH color tokens
Ubuntu / Ubuntu Mono — GNOME system fonts
Fumadocs — documentation engine with full-text search