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.
| 1 | # @colineapp/liquid-glass |
| 2 | |
| 3 | > Liquid Glass for the web: the rim refraction, light and motion of iOS 27's glass on any rounded element, with React bindings, menus that pour out of their button, and segmented tabs whose thumb clears into a lens. MIT. |
| 4 | |
| 5 | Version 0.2.0. Install: `npm install @colineapp/liquid-glass` |
| 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 |
