Introduction

A modern, accessible React component library built on Base UI. Own your components.

Olyx is a collection of accessible, composable React components. Built on Base UI and styled with pure CSS custom properties — copy, paste, and own.

Base UI provides the strongest foundation for accessible React components. Olyx layers a design system inspired by Material Design 3 on top of its unstyled primitives — ready to ship out of the box.

Olyx is in early development. We're building in the open and actively working on new components and features. Base UI itself is also in beta, so expect breaking changes as both projects evolve. Use this in projects where you're comfortable adapting.

How It Works

You own the code. Copy-paste components and own the source — no black-box dependencies.

  • No abstractions — Full control over how components look and behave.
  • Full customization — Need to change something? Edit the file.
  • Learn by doing — See how components are built and adapt them to your needs.

Built on Base UI, Designed for Production

Olyx is built on Base UI from the ground up — not an adaptation or port from Radix UI. Base UI handles the hard parts (accessibility, keyboard navigation, focus management) without imposing design decisions.

Our components go beyond base primitives:

  • 50+ production-ready components across core, form, navigation, feedback, and disclosure categories
  • Data-attribute styling — variants, modes, and sizes via data-variant, data-mode, data-size
  • Color system — an HCT-based theme generator that auto-generates WCAG AA accessible color tokens from a single brand hue
  • Consistent design tokens — spacing, radius, typography, shadows, and transitions defined as CSS custom properties

Primitives and Particles

At the core of Olyx are the UI primitives — accessible building blocks powered by Base UI. These handle accessibility, focus management, and keyboard interactions without dictating design.

On top of these, we introduce particles — pre-assembled examples that combine multiple primitives into ready-to-use patterns like forms, data displays, and interactive layouts. They're opinionated in design but easy to customize, extend, or break apart.

  • Primitives → the foundation
  • Particles → the patterns

This layered approach lets you choose the right abstraction level — whether you need a bare primitive or a polished UI pattern.

Open Source

Olyx is open source. We build in public, maintain transparency, and welcome contributions, feedback, and improvements.

Get Involved

Whether it's a bug report, a new component, or a documentation fix — we appreciate the help. Check out the Get Started guide to add your first component, or browse the Components section to see what's available.