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

## Segmented tabs

Your tabs, your selection; the thumb follows aria-selected. Every label the same colour, semibold when selected.

```tsx
import { useRef } from "react";
import { LiquidGlassTabLabel, 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-0.5">
      {["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">
          <LiquidGlassTabLabel>{label}</LiquidGlassTabLabel>
        </button>
      ))}
    </div>
  );
}
```