Components
Glass Tabs
A segmented control: Base UI Tabs with a glass pill that slides to the active tab, bending the labels as it goes. Drag the pill and it lands on the nearest tab, or flick it to the next. Tabs take an icon and an accent colour, which the glass picks up.
Drag the pill and it lands on the nearest tab, or flick it to the next.
The labels bend only while it moves, so at rest they stay crisp.
Base UI drives roving focus and the arrow keys.
Tune
Installation
$ pnpm dlx shadcn@latest add https://amir-abushanab.github.io/liquid-glass-js/r/glass-tabs.json
Copies the source into components/liquid-glass/ and installs its dependencies. Requires a shadcn-initialized project.
Remember to load the glass chrome CSS once
Load the shared stylesheet a single time (e.g. in your root layout or app entry):
import "@liquidglassjs/core/css"