Documentation

Liquidify is an independent web implementation inspired by Apple's Liquid Glass design language. It provides React controls, a CSS/SVG material engine, design tokens, and framework-agnostic motion primitives.

Start with @liquidify/react. It installs the material and token packages it needs, exposes the component catalog, and ships one aggregate stylesheet.

pnpm add @liquidify/react

Import the stylesheet once, then render a component:

import { Button, Theme } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function App() {
  return (
    <Theme type="system">
      <Button variant="glassProminent" onClick={() => console.log("Saved")}>
        Save changes
      </Button>
    </Theme>
  )
}