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 toolbar in React |
| 8 |
| 9 | Render <LiquidGlass /> first inside a positioned, rounded element. |
| 10 |
| 11 | ```tsx |
| 12 | import { LiquidGlass } from "@colineapp/liquid-glass/react"; |
| 13 | import "@colineapp/liquid-glass/styles.css"; |
| 14 |
| 15 | export function Toolbar() { |
| 16 | return ( |
| 17 | <nav className="relative flex gap-1 rounded-full p-1.5"> |
| 18 | <LiquidGlass appearance="class" interactive /> |
| 19 | <button className="liquid-glass-well rounded-full px-4 py-2">Today</button> |
| 20 | <button className="rounded-full px-4 py-2">Week</button> |
| 21 | </nav> |
| 22 | ); |
| 23 | } |
| 24 | ``` |
| 25 |