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. Each registry item installs styles/liquid.css, and the installed component imports it automatically:

import "@/styles/liquid.css"

The dedicated stylesheet contains the shared refraction layers, pointer states, spring geometry, and accessibility fallbacks. Tailwind remains available for layout and theming through className, data-slot selectors, CSS variables, and indicatorClassName; you do not need to copy any CSS into your global stylesheet.

Tailwind

Tailwind is supported but not required by the material renderer. Use className, stable data-slot attributes, or CSS variables to customize a component. This keeps the same optics available to both Tailwind and plain-CSS projects.