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 dialog |
| 8 |
| 9 | floating="dialog" casts the deeper shadow; the glass materializes as the contents zoom in. |
| 10 |
| 11 | ```tsx |
| 12 | import { useLayoutEffect, useRef } from "react"; |
| 13 | import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react"; |
| 14 |
| 15 | export function ShareDialog({ onClose }: { onClose: () => void }) { |
| 16 | const glass = useRef<LiquidGlassHandle | null>(null); |
| 17 | useLayoutEffect(() => { |
| 18 | void glass.current?.materialize({ scale: 0.965 }); |
| 19 | }, []); |
| 20 | const close = () => void glass.current?.dematerialize({ scale: 0.98 }).then(onClose); |
| 21 | return ( |
| 22 | <div role="dialog" aria-modal="true" className="fixed left-1/2 top-1/3 w-80 -translate-x-1/2 rounded-[28px] p-5"> |
| 23 | <LiquidGlass glassRef={glass} appearance="class" floating="dialog" /> |
| 24 | <h2 className="font-semibold">Share this album</h2> |
| 25 | <button className="liquid-glass-well mt-4 h-10 w-full rounded-full" onClick={close}>Copy link</button> |
| 26 | </div> |
| 27 | ); |
| 28 | } |
| 29 | ``` |
| 30 |
