Getting started
Introduction
OPUS UI is a component platform for Tailwind CSS v4 and React 19: 143 pieces — from buttons and selects to GPU fluid and black holes — each one a readable file you paste into your project.
What’s inside
Living, pointer-reactive surfaces — WebGL shaders, GPU simulations, canvas systems and pure CSS.
Interaction primitives that make an interface feel physical: light, depth, magnetism and motion.
Typography that moves with intent — scramble, reveal, tick, morph and react to the pointer.
Depth without a 3D engine — CSS 3D carousels, WebGL globes and draggable galleries.
The everyday kit, Ant-Design breadth with Tailwind ergonomics — accessible, keyboard-first, themeable.
Full sections assembled from OPUS parts — copy a whole hero, pricing table or auth screen.
Principles
Copy, don’t install
Every component is a file you own. No version pinning, no breaking upgrades, no black boxes.
Motion is a feature
Pointer-reactive, physically plausible, 60fps by construction — transforms, CSS variables and the GPU. React never re-renders per frame.
Calm by default
Everything pauses off-screen and in hidden tabs, and degrades gracefully under prefers-reduced-motion.
Accessible core
Native <dialog>, roving focus, aria wiring, keyboard paths for every interaction.
Themeable tokens
shadcn-compatible CSS variables in oklch — drop OPUS into a shadcn app and it just matches.
Agent-ready
llms.txt, markdown twins and registry JSON so any AI coding agent can find and install the right piece.
Anatomy of the kit
Everything lives in one folder, components/opus. Files import each other with relative paths, so the folder works under any alias or monorepo layout:
components/opus/ ├── opus.css ← tokens + keyframes, import once ├── lib/ ← cn, ShaderCanvas, gl-sim, canvas-2d, floating, hooks ├── ui/ ← 52 everyday components ├── backgrounds/ ← 34 living backgrounds ├── effects/ ← 21 interaction effects ├── text/ ← 14 typographic effects ├── three/ ← 8 3D galleries & objects └── blocks/ ← 14 full sections
The only npm dependencies are clsx and tailwind-merge (for cn()). Backgrounds, effects and 3D pieces use nothing beyond React and the browser.
Next steps
- Install the theme file and copy your first component.
- Open the theme builder to generate tokens in your brand colour.
- Use the registry & CLI to pull components into other projects in one command.
- Point your coding agent at the agent guide.