Open-Source React Component Library Built on Base UI
Open-Source React Component Library Built on Base UI
Building accessible, production-ready UIs from scratch is time-consuming and error-prone. Most component libraries either lock you into rigid abstractions or leave a11y as an afterthought. Olyx was built to solve this — giving developers a set of composable, accessible React components they can truly own.
Olyx is a copy-paste component library built on Base UI and styled with pure CSS custom properties. Instead of installing a black-box package, you take the source code directly into your project — no hidden abstractions, full customization, and a design system inspired by Material Design 3 ready to ship out of the box.
Design System & Tokens
Olyx ships with a consistent set of design tokens covering spacing, radius, typography, shadows, and transitions — all defined as CSS custom properties. An HCT-based color system auto-generates WCAG AA accessible palettes from a single brand hue, making theming straightforward and predictable.
HCT Color & Hue-Driven Theming
Olyx uses an HCT-based color system — the same perceptual color space behind Material Design 3. Provide a single brand hue and the system automatically generates a full, WCAG AA accessible palette across all tones and roles. Every color token is exposed as a CSS custom property, so theming a component or an entire app is a one-line change.
50+ Production-Ready Components
From core form controls and navigation menus to feedback overlays and disclosure panels — Olyx covers the full range of UI needs. Every component supports data-attribute styling for variants, modes, and sizes, and all are keyboard navigable and screen-reader friendly out of the box.
