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.
| > Liquid Glass for the web: the rim refraction, light and motion of iOS 27's glass on any rounded element, with React bindings and tabs whose thumb lifts into a lens. MIT. |
| 4 |
| 5 | Version 0.1.0. Install: `npm install @colineapp/liquid-glass`. npm: https://www.npmjs.com/package/@colineapp/liquid-glass. Source: https://upstream.codes/coline/liquid-glass. Playground: https://liquid-glass.coline.space. |
| 6 |
| 7 | ## Pill tabs |
| 8 |
| 9 | Your tabs, your selection; the thumb follows aria-selected. |
| 10 |
| 11 | ```tsx |
| 12 | import { useRef } from "react"; |
| 13 | import { useLiquidGlassTabs } from "@colineapp/liquid-glass/react"; |
| 14 |
| 15 | export function Period({ value, onChange }: { value: string; onChange: (value: string) => void }) { |
| 16 | const track = useRef<HTMLDivElement>(null); |
| 17 | useLiquidGlassTabs(track, { appearance: "class" }); |
| 18 | return ( |
| 19 | <div ref={track} role="tablist" className="flex rounded-full p-1"> |
| 20 | {["Day", "Week", "Month"].map((label) => ( |
| 21 | <button key={label} role="tab" aria-selected={label === value} onClick={() => onChange(label)} |
| 22 | className="rounded-full px-4 py-1.5 text-sm font-medium"> |
| 23 | {label} |
| 24 | </button> |
| 25 | ))} |
| 26 | </div> |
| 27 | ); |
| 28 | } |
| 29 | ``` |
| 30 |