Opaline - Liquid Glass for React

What if your UI didn't just look like glass, but actually behaved like it?

Meet Opaline, a collection of liquid glass components for React that brings Apple's signature glass aesthetic to the web. Think translucent surfaces, light-catching edges, subtle colour dispersion, and backgrounds that bend through the glass instead of simply blurring behind it.

Under the hood, Opaline uses real displacement maps and physically based refraction to create that unmistakable liquid glass look.

What's inside:

• Real refraction. Glass that bends the backdrop, with light-catching rims and subtle chromatic dispersion.

• 50+ components. From glass buttons, dialogs and docks to iOS-inspired controls, code blocks and more.

• Made to be played with. Tune the index of refraction, thickness, surface profile, tint and more to get the exact look you're after.

• Your code, your way. Install components directly into your project with the shadcn CLI. No locked-in component package — just code you can own and customise.

• Built for real interfaces. Powered by Tailwind CSS v4 and Radix UI, with accessible interactions and frosted-glass fallbacks for Safari and Firefox.

Whether you're building a macOS-inspired dashboard, a polished portfolio or something entirely your own, Opaline gives you the building blocks to make the interface feel a little more alive.

One command to get started:

npx shadcn@latest add @opaline/all

Interfaces that bend the light.

Explore Opaline: https://opaline.buildlab.in