Installation
Install the primary React package or an advanced Liquidify package with pnpm.
Install the primary package in a React 19 application:
pnpm add @liquidify/reactreact and react-dom 19 are peer dependencies. If they are not already present:
pnpm add react react-dom @liquidify/reactImport the aggregate stylesheet once near the application root:
import "@liquidify/react/styles.css"This stylesheet includes the component rules, material engine styles, and design-token cascade. Do not repeat it in individual components.
Per-component entry points
Every public component is also exposed as its own subpath under @liquidify/react,
so a consumer can import a single control without going through the barrel:
import { Button } from "@liquidify/react/button"
import { TextField } from "@liquidify/react/text-field"The subpath is the component's kebab-case name — @liquidify/react/segmented-control,
@liquidify/react/text-field, @liquidify/react/action-sheet, and so on. The barrel
import (from "@liquidify/react") is tree-shakeable in a modern bundler, so prefer it
for ergonomics; reach for a subpath when you want an explicit per-component boundary.
The stylesheet is shared either way — import @liquidify/react/styles.css once
regardless of which entry points you use.
Advanced packages
The lower-level packages can be installed independently when you need their public APIs directly:
pnpm add @liquidify/glass
pnpm add @liquidify/tokens
pnpm add @liquidify/motionImport the package-specific CSS only when you are not using the aggregate React stylesheet:
import "@liquidify/glass/glass.css"
import "@liquidify/tokens/variables.css"Before you continue
- Liquidify currently documents an experimental API. Pin the package version used by your application.
- The supported browser floor is listed in browser support.
- Choose the framework guide listed under Getting started for the correct CSS import and client-component boundary.