# @colineapp/liquid-glass

> 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.

Version 0.2.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.

## A glass toolbar in React

Render <LiquidGlass /> first inside a positioned, rounded element.

```tsx
import { LiquidGlass } from "@colineapp/liquid-glass/react";
import "@colineapp/liquid-glass/styles.css";

export function Toolbar() {
  return (
    <nav className="relative flex gap-1 rounded-full p-1.5">
      <LiquidGlass appearance="class" interactive />
      <button className="liquid-glass-well rounded-full px-4 py-2">Today</button>
      <button className="rounded-full px-4 py-2">Week</button>
    </nav>
  );
}
```