Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.
| 4 |
| 5 | Version 0.1.0. Install: `npm install @colineapp/liquid-glass`. npm: https://www.npmjs.com/package/@colineapp/liquid-glass. Playground: https://liquid-glass.coline.space. |
| 6 |
| 7 | ## A glass card |
| 8 |
| 9 | Regular glass on a rounded box: the rim bends what crosses it, and the body keeps the card's text legible. |
| 10 |
| 11 | ```tsx |
| 12 | import { LiquidGlass } from "@colineapp/liquid-glass/react"; |
| 13 | import "@colineapp/liquid-glass/styles.css"; |
| 14 |
| 15 | export function Card() { |
| 16 | return ( |
| 17 | <div className="relative grid gap-1 rounded-[30px] p-5"> |
| 18 | <LiquidGlass appearance="class" /> |
| 19 | <h3 className="font-semibold">Now playing</h3> |
| 20 | <p className="text-sm opacity-70">Glass takes the box's radius and follows its size.</p> |
| 21 | </div> |
| 22 | ); |
| 23 | } |
| 24 | ``` |
| 25 |