Installation

Initialize shadcn, wire the @strange-ui registry, run init — then ship components without leaving the brand.

Strange UI installs through the shadcn CLI. This page walks through wiring it into a fresh Next.js project and adding your first component.

Prerequisites

Strange UI assumes a project running:

Next.js 14 or later (App Router) — Next 16 is the canonical target.
Tailwind CSS v4 with @theme directive support (the CSS-first config).
TypeScript 5+.
React 18.3+ (React 19 supported).

If you're starting fresh, scaffold with:

npx create-next-app@latest my-app --typescript --tailwind --app

1. Initialize shadcn/ui

In your consumer project (the app where you want components), run shadcn's init once. It creates components.json, Tailwind wiring, and the folder structure the CLI expects:

npx shadcn@latest init

Follow the prompts — pick your framework (Next.js), enable TypeScript, and turn on CSS variables. Strange UI's registry items assume a components.json file exists before you add @strange-ui/*.

Already initialized?

If you already ran shadcn init on this repo, skip to step 2 and merge the @strange-ui registry block into your existing components.json — don't overwrite the whole file.

2. Configure the @strange-ui registry

Add the namespace to components.json in that same project. Use the URL for this docs/registry deployment (no auth required for now):

Registry base URL: https://ui.cocloud.in/r/{name}.json (from NEXT_PUBLIC_APP_URL)

json

{
  "registries": {
    "@strange-ui": {
      "url": "https://ui.cocloud.in/r/{name}.json"
    }
  }
}

Unknown registry @strange-ui?

If you see that error, registries is missing in the project where you run the CLI. Add the block above, then retry. Local installs need npm run dev in this app so http://localhost:3000/r/*.json is reachable — or point the URL at your deployed origin.

Set NEXT_PUBLIC_APP_URL when deploying so the snippet matches production. For local dev, the default is http://localhost:3000.

Theme preset commands: Install via CLI.

3. Initialize Strange UI

Install the Strange UI bootstrap bundle — tokens, base CSS, and cn():

npx shadcn@latest add @strange-ui/init

This is a one-time setup. It writes to:

app/globals.css — token blocks and base CSS layer.
lib/utils.ts — installs cn().
package.json — core deps (clsx, tailwind-merge, class-variance-authority, lucide-react, tw-animate-css).

4. Wire fonts and providers

Strange UI uses three Google fonts via next/font/google:

| Role | Font | Utility | |---|---|---| | Body | Manrope | font-sans | | Headings | Space Grotesk | font-heading | | Mono | Geist Mono | font-mono |

See Fonts for layout.tsx wiring.

5. Add your first component

npx shadcn@latest add @strange-ui/button

The CLI walks registryDependencies automatically.

Next steps

Browse Components and Blocks.
Tune tokens in the Theme Editor.
Install presets from Install via CLI.