Liquid Glass for the web
iOS 26 controls for React, with real refraction and real springs. Radix handles the accessibility, and the shadcn CLI drops the source into your project.
Recorded from the components on this site.
Try it
Drag the slider, flip the switch, slide across the tab bar.
Components
Each one has a page with live examples you can use.
Use it with AI
AI can build your frontend. The skill keeps it from looking like AI did.
npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-ui-skill.jsonIt lands in .claude/skills/liquid-ui, where Claude Code, Cursor and other agents that read skills pick it up.
- Picks the componentTab bar or toolbar, drawer or alert. It knows which one fits the screen.
- Fixes glass that looks offGrey boxes, no bending in Safari, hydration errors, each with its cause.
- Checks the edge casesEmpty, loading, long text, small screens, dark mode and the keyboard.
Open code
Components install as source through the shadcn CLI, so the code lands in your project and there's no Liquid UI runtime to depend on. You get the component, its hooks and its utilities, and they're yours to change.
npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-switch.jsonBuilt on Radix
Radix is the set of headless primitives underneath, it owns the semantics, focus and keyboard behaviour. Liquid UI adds the material, the refraction, the pointer physics and the spring motion on top. Start with installation, or read how the material and motion work.
If it helps your project, star Liquid UI on GitHub.