Understand the packages that make up the current Liquidify implementation.
“Liquidify Core” is the documentation group for the implementation packages. There is no @liquidify/core package in the checked workspace. Most React consumers start from @liquidify/react.
| Package | Responsibility | When to import it directly |
|---|---|---|
@liquidify/react | Components and the aggregate stylesheet | Building a React interface |
@liquidify/glass | Glass surfaces, rendering helpers, and providers | Using an API not re-exported by React, such as IncreaseContrast |
@liquidify/tokens | Token data, CSS variables, and token tooling | Consuming token exports outside the aggregate React stylesheet |
@liquidify/motion | Motion utilities and optional React integration | Using its documented motion APIs directly |
The React package depends on glass, tokens, and motion; glass also depends on tokens and motion. Declare a direct dependency when application code imports a package directly. Transitive installation does not replace that dependency declaration.
Figure in preparation
Package responsibilities
A dependency diagram of the four verified Liquidify packages and the React stylesheet.
Import from a package's declared export paths. For example, Button is available from @liquidify/react and @liquidify/react/button. Internal dist paths and source filenames are not consumer APIs.
Keep the aggregate @liquidify/react/styles.css import for the React setup. A per-component JavaScript import does not automatically load that stylesheet. Avoid layering package CSS imports over it without a deliberate CSS strategy.
Use the React package reference and the component catalog for API details. Check the installed declaration when a catalog description disagrees with the component.
Read package availability before installing from npm. The checked public React release is a placeholder; this guide does not offer a production registry installation command.
The installed React and glass manifests require React 19 and React DOM 19. Match the package set from one tested source revision, and record that revision with locally packed artifacts. Equal version labels do not prove equal code.
A token package or a CSS file does not establish a Web Components implementation. The Web Components tutorial remains pending.
packages/@liquidify/