Prepare a React application, confirm package availability, and connect controls to application state.
Liquidify provides React controls, a glass rendering package, design tokens, and motion utilities. Begin with the implementation available to your project, then add one interaction and review it in context.
The npm latest release checked on October 21, 2026 is @liquidify/react@0.0.0-placeholder, described as a reserved package. It does not provide the implementation shown on this website. A successful registry installation alone does not establish that the components are available.
The website uses local vendored packages. The library repository contains workspace packages and checks that build consumer fixtures from packed artifacts. Use a verified local integration for evaluation; do not substitute the placeholder for those artifacts. Record the source revision, because the checked source packages also use 0.0.0 version labels.
The existing Installation page describes package names and stylesheet entry points, but its registry commands require a usable published release. Public distribution remains pending in this guide until such a release is verified.
An application needs React 19, React DOM 19, and a build setup that handles TypeScript or JSX and CSS imports. Follow the integration details for Vite, Next.js, React Router, Astro, or plain React, after resolving the package-availability limitation above.
Public source access is not verified; these steps assume an authorized checkout is already available. For source evaluation, run these commands in that library checkout with Node.js 22 or newer and pnpm 9.15.9:
pnpm install
pnpm build
pnpm --filter @liquidify/playground devThis starts the repository's Storybook workspace. The website is a separate repository. The starter template uses workspace dependencies and is not a standalone published starter; do not assume copying its directory installs the library.
For external consumer validation, the repository's fixtures/consumer/README.md explains the packed-artifact checks. Those fixture directories require generated tarballs and are not ready-to-install applications.
Import @liquidify/react/styles.css once at the application root. It includes the React rules, glass styles, and token cascade. Use named exports from @liquidify/react; use a documented subpath only when you need an explicit component entry point.
Theme is optional and re-exported by the React package. Use Theme type="system" to follow the system color scheme for its subtree. Providers configure supported descendants; they do not add routing, persistence, or validation. See Liquidify Core for package responsibilities.
Follow the React tutorial to connect a preference to state and save feedback. Check labels, keyboard use, pending operations, and failure recovery before extending the screen.
Review both themes and narrow layouts. Browser rendering differs; use the browser-support guide as a starting point and test the browsers your product requires.