Installation

Lazy-ui is delivered as a shadcn-style registry. You point the shadcn CLI at a component URL, and the source — implementation, index export, and any helper files — lands directly in your repo.

Browse components Back to intro

The short version

Pull Lazy-ui components into your project through the shadcn CLI. One URL per component, no npm package.

Registry-only

Not on npm.

There is no @lazy-ui package to install. Each component is a self-contained registry item at /r/[name].json. The CLI fetches, the source is yours.

Own the source

Files in your repo.

Generated code lands under components/lazy-ui. Rename it, restyle it, fork the interaction — nothing is hidden behind a bundle.

Details

Requirements

Lazy-ui targets an existing shadcn-compatible React app. If shadcn/ui is wired up in your project, you already have everything you need.

A React app with Tailwind CSS configured (Next.js, Vite, or similar).
shadcn/ui initialized — the cn() helper and components path alias.
Run the CLI from the project root so generated file paths resolve.

Add a component

Open the component page, copy its registry URL, and pass it to the shadcn CLI. Internal Lazy-ui dependencies (e.g. a shared util another component needs) are fetched automatically.

Browse every component at /components — each page links to its slug.
WebGL backgrounds and motion primitives declare their npm deps in the registry item; the CLI surfaces them on install.
Commit the generated files. Lazy-ui is copy-and-paste by design.

Update or replace

Components don't auto-update — that's the trade-off for owning the source. Re-run the CLI with the same URL to overwrite, or merge changes by hand.

Re-running shadcn add will prompt before overwriting an existing file.
Diff against the registry source on GitHub to see what changed.
Once you've customized a component heavily, treat it as your own code.

Copyable bits

Commands and snippets match the registry paths used by this project.

Add a component

npx shadcn@latest add https://2lazyui.com/r/liquid-chrome.json

From a fresh Next.js project

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init
npx shadcn@latest add https://2lazyui.com/r/liquid-chrome.json

Other package managers

pnpm dlx shadcn@latest add https://2lazyui.com/r/liquid-chrome.json
bunx shadcn@latest add https://2lazyui.com/r/liquid-chrome.json
yarn dlx shadcn@latest add https://2lazyui.com/r/liquid-chrome.json