opui-css

Open Props UI

A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Built on top of Open Props and ships HTML, Astro and Vue components alongside framework-agnostic CSS.

• Docs: open-props-ui.netlify.app
• Source: github.com/felix-bohlin/ui

Install

pnpm add opui-css open-props

Peer dependencies:

• astro ^6 (only required if you use the Astro components)
• vue ^3 (only required if you use the Vue components)
• open-props ^1

Usage

Astro components

---
import "opui-css/css/imports.css"
import { Button, Card } from "opui-css/astro"
---

<Card>
  <Button variant="primary">Click me</Button>
</Card>

Plain HTML + CSS (no build step)

Drop a pre-bundled stylesheet into any page and use the documented class names:

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

<button class="ui-button ui-primary">Click me</button>

dist/opui.css is a single self-contained file (Open Props + normalize + theme + every component + utils, in the correct cascade layers). dist/opui.components.css is the same minus tokens and reset for users who already have those.

If you do have a bundler that resolves CSS @imports (Vite, Astro, webpack, …), import the source instead so you only ship what you use:

@import "opui-css/css/imports.css"; /* same content as dist/opui.css */
@import "opui-css/css/components/button.css"; /* or pick à la carte */

Cascade layers

The library defines this layer order:

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

Wrap your own styles in a layer above utils (or unlayered) to override.

Entry points

License

MIT © Felix Bohlin