Caustica Design — Glass UI library, OKLCH CSS design system

Why Caustica Design

Named for the bright shapes light makes through glass or water. That same quiet shimmer on screen — open, layered glassmorphism driven by an OKLCH design system and design tokens, with an optional React component library when you need behavior.

Like light through glass — not chrome

Screens breathe. See-through panels, thin borders, and soft CSS glass effects — glass UI closer to the shimmer on a pool floor than frosted chrome or a wall of solid gray boxes.
Color that stays calm in light and dark

Color, space, and type live as OKLCH design tokens. Themes swap semantic aliases only — a calm design system for React and plain HTML, without a color engine or runtime theme scripts.
CSS owns the look; React is optional

Drop in caustica-design/css and modern CSS components are yours in plain HTML. Reach for the optional React UI library in caustica-design/core when you want typed props, portals, and accessible React components.

See it live

One glass panel — tabs, fields, switches, and a quiet toast — using the same classes your app will ship with.

Tonight’s release

Name it, write the note, then save when it feels ready.

running

Checklist 2 of 3

Release name

Ship note

Lands on the changelog — and in the toast when you save.

A short note helps the next person trust what changed.

Install

One package. CSS brings the glass; React is there when you want typed behavior.

Install the package
```
npm install caustica-design
```

Bring in CSS — add React if you like

import 'caustica-design/css'
import { Button } from 'caustica-design/core'

Pin an exact release with caustica-design@0.2.4. React needs react 18+; Vue needs vue 3.4+. Angular uses custom elements.

CSS imports guide React setup Vue setup Angular setup

Explore

Guides when you need them — examples when you want to feel the glass.

Docs

Examples

Dig deeper into glassmorphism UI, OKLCH design tokens, and Caustica vs shadcn.

FAQ

Straight answers — so you can get to the soft light sooner.

Do I need React?

No. Import caustica-design/css and use the class names in plain HTML — CSS owns the glass UI. Reach for caustica-design/core when you want typed props, portals, and keyboard behavior — with React 18 or newer as peers.

Is Caustica a React UI library?

It is a CSS-first glass UI library first — modern CSS components and design tokens you can use without React. The optional React component library adds typed props and accessible React components (focus, portals, keyboard) when you want behavior on top of the same look.

What is glassmorphism here?

How do light and dark work?

Can I load CSS from a CDN?

Where do the icons come from?

What license is the software under?

Contribute

Help shape what comes next — fund the work via InstaPay or bank transfer, or send a bug report or idea.

Build something that breathes.

Tokens, components, and soft light — one guide from install to the interfaces people feel next.

Open the getting started guide Install caustica-design