# @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 and tabs whose thumb lifts into a lens. MIT.

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.

## 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>
  );
}
```