liquefy-ui

Overview

liquefy-ui is an open-source TypeScript UI library that renders transparent "Liquid Glass" components for React. It combines WebGL edge refraction, springs that respond to pointer velocity and accessible Base UI primitives, and it is an independent project not affiliated with Apple.

The library can be installed from npm (@liquefy-ui/react, @liquefy-ui/core and @liquefy-ui/icons) and wrapped in a LiquefyProvider, or copied in as source through the shadcn registry, which lists 35 UI components plus a style item, a hook and helper libraries. Every component is a client component, the project ships a Tailwind v4 bridge stylesheet and an MCP server, and it is MIT licensed.

Features

• WebGL optics: Real edge refraction and rim light on glass surfaces such as the button and card.
• Spring physics: Pointer-driven springs, including a jelly press effect on buttons.
• Form controls: Button, icon button, checkbox, radio, switch, slider, select, text field, textarea, date picker, rating and segmented control.
• Overlays and feedback: Dialog, drawer, menu, tooltip, toast, alert, progress, gauge and skeleton.
• Layout pieces: Glass card, a macOS-style glass dock that magnifies under the pointer, tabs, table, list and accordion.
• Hook and provider: use-liquid-glass and a provider for applying the effect to custom elements.
• Tailwind v4 bridge: A stylesheet that maps design tokens into Tailwind and sets the correct layer order.
• MCP server: Exposes the components to AI coding agents.

Tech stack

• React, TypeScript, Base UI 1.8, WebGL, Tailwind CSS v4

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @liquefy-ui/component-name