Installation

Requirements

• React 19 or a compatible React 18 project.
• A components.json file configured for shadcn/ui.
• npm, pnpm, Yarn, or Bun. Pick the package manager your project already uses.

Install a component

npx shadcn@latest add https://liquidcomponents.xyz/r/liquid-switch.json

The CLI installs the component source, shared motion hook, displacement renderer, utilities, CSS, and external dependencies. Review the diff and commit those files as part of your application.

Liquid UI uses Bun for developing and validating this repository. That does not create a Bun runtime dependency in installed components.

Optional namespace

Register the hosted collection once:

npx shadcn@latest registry add '@liquid=https://liquidcomponents.xyz/r/{name}.json'

Then install any component by name:

npx shadcn@latest add @liquid/liquid-slider

Styles are automatic

There is no CSS setup step. Liquid UI follows the shadcn component model: visual rules live as Tailwind utilities in the installed component source. Runtime CSS variables carry pointer position, geometry, and refraction values without requiring a separate stylesheet or global import.

Reduced-motion and reduced-transparency fallbacks are expressed alongside the affected layers, so they travel with the component.

Tailwind

Use className, stable data-slot attributes, or CSS variables to customize a component. The registry targets projects configured with Tailwind through shadcn’s components.json.