liquefy-ui MCP server

A TypeScript UI library that delivers highly transparent Liquid Glass through WebGL optics, physical springs, and accessible React primitives.

This is an independent open-source project and is not affiliated with Apple Inc. It references public design principles while providing an original implementation for the web.

The capture above comes from the live playground: that is a displacement map applied to the real backdrop through backdrop-filter, while the shape stretches and overshoots from springs reading pointer velocity. Both are on by default. Scroll it yourself at liquefy-ui.com, which also hosts the component reference and the shadcn registry.

Packages

Quick start

pnpm add @liquefy-ui/react @liquefy-ui/core @liquefy-ui/icons

import { LiquefyProvider, LiquidButton } from '@liquefy-ui/react'
import { SparklesIcon } from '@liquefy-ui/icons'
import '@liquefy-ui/react/styles.css'

export function App() {
  return (
    <LiquefyProvider>
      <LiquidButton iconBefore={<SparklesIcon />}>
        Create magic
      </LiquidButton>
    </LiquefyProvider>
  )
}

Next.js and React Server Components

Every component needs state, refs or the WebGL lens, so the whole package sits on the client side of an RSC boundary. The published bundles carry a 'use client' directive, so importing them straight into a server component works — no wrapper file needed. Only event handlers have to move: a function cannot cross from a server component into a client one, so anything with onClick or local state belongs in its own 'use client' component.

apps/next-example is a working Next.js 16 App Router app whose page is a server component, and its build runs in CI. If the client boundary ever regresses, that build fails rather than yours.

Tailwind CSS v4

Import tailwind.css instead of styles.css, before Tailwind itself:

@import '@liquefy-ui/react/tailwind.css';
@import 'tailwindcss';

That declares the cascade layer order — so className="rounded-full" on a LiquidButton actually wins — and bridges the --lq-* tokens into Tailwind's theme as bg-liquid-accent, text-liquid-muted, rounded-liquid, shadow-liquid, ease-liquid and friends. The bridge uses @theme inline, which is what keeps those utilities resolving per-theme at use time.

For coding agents

Shortened. The full README is on GitHub.