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

## Pill tabs

Your tabs, your selection; the thumb follows aria-selected.

```tsx
import { useRef } from "react";
import { useLiquidGlassTabs } from "@colineapp/liquid-glass/react";

export function Period({ value, onChange }: { value: string; onChange: (value: string) => void }) {
  const track = useRef<HTMLDivElement>(null);
  useLiquidGlassTabs(track, { appearance: "class" });
  return (
    <div ref={track} role="tablist" className="flex rounded-full p-1">
      {["Day", "Week", "Month"].map((label) => (
        <button key={label} role="tab" aria-selected={label === value} onClick={() => onChange(label)}
          className="rounded-full px-4 py-1.5 text-sm font-medium">
          {label}
        </button>
      ))}
    </div>
  );
}
```