@liquidify/react

The primary Liquidify component package for React 19 applications.

Experimental: this package is pre-release and its API may change. Pin the version used by your application.

Install the primary package:

pnpm add @liquidify/react

Import the aggregate stylesheet once and use named exports:

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

export function SaveAction() {
  return (
    <Theme type="system">
      <Button variant="glassProminent" onPress={() => console.log("save")}>
        Save
      </Button>
    </Theme>
  )
}

Public entry points

@liquidify/react — all public components, shared types, and the Theme convenience export.
@liquidify/react/styles.css — aggregate component, engine, and token styles.
@liquidify/react/<component> — supported per-component JavaScript and type entry points, such as @liquidify/react/button.

Use package exports, not src or dist paths. The generated API section on each component page is the authority for props, defaults, callback payloads, and SwiftUI concept mapping.

Dependencies

React and React DOM 19 are peer dependencies. @liquidify/glass and @liquidify/tokens are direct package dependencies, so the standard component install does not require adding them separately.

CSS strategy

The aggregate stylesheet is the supported default. Load it before application styles that intentionally override public --lq-* tokens. Per-component JavaScript entry points do not remove the need for an explicit, verified CSS strategy.