Installation | Clover UI

Installs are paused for now. You can still preview and customize every component on its page.

Clover UI components install with the shadcn CLI. You need a React project with Tailwind CSS v4.

Set up shadcn

Skip this if your project already has a components.json.

npx shadcn@latest init

Add Clover UI to the registries field in components.json:

{
  "registries": {
    "@clover-ui": "https://cloverui.xyz/r/{name}.json"
  }
}

Add every Clover UI component in one go:

pnpm dlx shadcn@latest add @clover-ui/all

Or install just the ones you need, by name:

pnpm dlx shadcn@latest add @clover-ui/clicky

The CLI copies the component into your project and installs what it needs, such as motion. Then import it like any other file:

import { Clicky } from "@/components/clicky";

Every component is also published as a plain URL, so you can install without touching components.json:

npx shadcn@latest add https://cloverui.xyz/r/clicky.json
npx shadcn@latest add https://cloverui.xyz/r/all.json

Or open any component page, pick the Manual tab under Installation, and copy the source yourself.