Guide

Getting started

OPUI ships first-class Astro components. Install the package, import what you need, and you're set.

Install via NPM

pnpm

pnpm add opui-css open-props astro -S

npm

npm install opui-css open-props astro -S

Import the CSS

Astro components ship markup only - the CSS still has to be imported in your app somehow. Import everything:

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

Or pick and choose:

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

How to use

---
import { Button } from "opui-css/astro"
---

<Button variant="filled">Click me</Button>

Theming

The basic idea is to define one source color, --palette-source, and then derive the rest of the 16-step palette from it.

:where(html) {
  --palette-source: oklch(0.58 0.18 264);
  --palette-hue-rotate-by: 0;
}

Must be oklch().
--palette-hue-rotate-by is a separate knob for per-step warm/cool drift, in degrees.

You can override the source color anywhere you want for useful or cool effect:

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

Motion

Use the --motion variable to turn motion on or off. The default value is 1. If a user has prefers-reduced-motion: reduce enabled, --motion will be set to 0 by default.

Global Classes

Adding these utility classes to the html element will override the OS preference.

.ui-motion-off: sets --motion: 0.
.ui-motion-on: sets --motion: 1.
.ui-motion-debug: sets --motion: 10 (slows down transitions 10x).

<html lang="en" class="ui-motion-debug">

Local Overrides

Components use a local --_motion variable that allows you to disable motion for each component individually if you want.

<button class="ui-button" style="--_motion: 0">
  Instant interaction
</button>

Additionally, this is how you could include --motion in your CSS:

transition: transform calc(0.2s * var(--motion, 1)) ease;