Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Guide

Getting started

Open Props UI is a CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists.

Open Props UI is just CSS. You can copy any component CSS straight from the docs — no install required. The rest of this page is for when you want the full setup.

Install manually

The most flexible way to use OPUI. Download these files from the src/ folder on GitHub and drop them into your project for full control. 

├─ src
  └─ core
     ├─ normalize.css
     └─ utils.css
  └─ theme
     ├─ theme.css
     ├─ open-props.css
     └─ components.css

Combine them in your main stylesheet:

@layer openprops, normalize, theme, components.root, components.extended, utils;


@import "./open-props.css";
@import "../core/normalize.css";
@import "./theme.css";
@import "./components.css";
@import "../core/utils.css";

The import paths above assume the folder layout shown in the tree — adjust them if you place the files elsewhere.

theme.css generator

There's a visual editor for editing theme.css - try it out!

Theming

Once installed, here's how the theming system fits together: a single palette source feeds intent tokens, which components read from. The focus ring, control sizes, and shadows are separate scales you can tune independently.

Palette source

The 16-step --color-N ramp is generated from a single OKLCH input: --palette-source. Setting it on :where(html) (or any ancestor) regenerates the entire palette in place. 

:where(html) {
  --palette-source: oklch(0.58 0.18 264);
  --palette-hue-rotate-by: 0;
}
  • Must be oklch(). Hex, rgb(), and named colors won't work — the relative-color math reads the source's c and h channels directly.
  • Hue and chroma propagate; lightness is not used. The ramp keeps its own L curve, so the literal source color won't necessarily appear at any step.
  • --palette-hue-rotate-by is a separate knob for per-step warm/cool drift, in degrees.

To re-source the palette in a sub-tree (e.g. for status colors), override --palette-source on a scoped selector: 

:where(.warning) {
  --palette-source: oklch(0.58 0.21 var(--hue-orange));
}

Install via NPM

Install the package and import the pre-bundled themes.

Terminal window
pnpm add opui -S
Terminal window
npm install opui -S

Usage

Either import everything:

@import "opui/css/imports.css";

Or pick and choose the parts you want to include:

@import "opui/core/normalize.css";
@import "opui/core/utils.css";
@import "opui/css/theme.css";
@import "opui/css/components.css";

Install via CDN

For the quickest way to get started, you can include the styles via CDN. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/opui/css/imports.css" />