Caustica Design
Install

Where light becomes texture — a translucent CSS design system for glass UI, shaping the future of design one soft surface at a time.

Install caustica-design See it in examples

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 optional React, Vue, or Angular 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 plain HTML and any framework, without a color engine or runtime theme scripts.

  • CSS owns the look; React, Vue, and Angular are optional

    Drop in caustica-design/css and modern CSS components are yours in plain HTML. Reach for caustica-design/core (React), caustica-design/vue, or caustica-design/angular custom elements when you want typed props, portals, and accessible behavior.

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

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, Vue, or Angular when you want typed behavior.

  1. Install the package

    npm install caustica-design

  2. Bring in CSS — add a framework if you like

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

Pin an exact release with caustica-design@1.0.0. 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.

No. Import caustica-design/css and use the class names in plain HTML — CSS owns the glass UI. Add caustica-design/core (React 18+), caustica-design/vue (Vue 3.4+), or caustica-design/angular custom elements when you want typed props, portals, and keyboard behavior.

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