6 sections · ~5 min · React (Next.js)

Setup. One command.

Tokens, helpers, and the theme provider — installed with onenpx. Ready to use in your project in minutes.

Bootstrap

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/init.json -y

$npx shadcn@latest add https://uipkge.dev/r/react/init.json -y

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/init.json -y

$bunx shadcn@latest add https://uipkge.dev/r/react/init.json -y

Named registry:npx shadcn@latest add @uipkge-react/init -y

Setup map

0/5 completed

Install Tailwind v4

Next.js · ~20s

The shadcn preflight refuses to write components when it can't find a Tailwind setup (No Tailwind CSS configuration found), so wire Tailwind v4 in first. If you're not on Next.js, follow tailwindcss.com/docs/installation then jump to step 02.

1. Install Tailwind v4 + the PostCSS plugin

terminal

npm install -D tailwindcss @tailwindcss/postcss postcss typescript

2. Create a placeholder CSS entry
shadcn probes for a Tailwind-importing CSS file before it does anything. Step 03 overwrites this file with the full OKLCH token set, so the placeholder is throwaway. Create app/globals.css in your editor and paste in:
app/globals.css
```
@import "tailwindcss";
```
Skip the echo '...' > file shell trick — it writes a UTF-16 BOM under PowerShell that Vite rejects, and CMD has no mkdir -p. Create the file in your editor.

3. Add PostCSS config for Tailwind v4

postcss.config.mjs

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config

4. Wrap the root layout with ThemeProvider (installed by init.json in step 03)

app/layout.tsx

import { ThemeProvider } from '@/components/theme-provider'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

This is the public React setup path. The Next.js boilerplate link will appear here once that repo is public.

Pre-write `components.json`

Recommended · ~5s

You can let npx shadcn add scaffold this, but the CLI fires interactive prompts (icon library / font / base color) before it reads -y, and it won't pre-register the @uipkge-reactnamed registry. Writing it yourself skips both. Our registry items target ~/app/... directly, so components install to the right place regardless of how the CLI resolves the @/ aliases below.

Create components.json at the project root and paste this in:

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "composables": "@/composables",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib"
  },
  "registries": {
    "@uipkge-react": "https://uipkge.dev/r/react/{name}.json"
  }
}

Bootstrap your project

~10s · 4 files

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/init.json -y

$npx shadcn@latest add https://uipkge.dev/r/react/init.json -y

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/init.json -y

$bunx shadcn@latest add https://uipkge.dev/r/react/init.json -y

Named registry:npx shadcn@latest add @uipkge-react/init -y

With components.json already in place from step 02, the CLI resolves init.json's three transitive deps (tailwind tokens, cn(), theme provider) and writes 4 files. You may see a single overwrite prompt for the CSS file mid-install — press Enter (default N); the token merge has already run. The "Circular dependency detected" notice you may see is a benign upstream resolver quirk.

Drops these into your repo — yours to edit, no upgrades.

initlib

Installs the complete UIPKGE bootstrap foundation.

tailwindstyle

Adds shared Tailwind tokens and base styles.

utilslib

Adds the cn() class-merging helper.

use-themehook

Adds framework-aware theme support.

Add any component

128 primitives · 436 blocks

Install any component with one command. Use a direct URL, or register the named registry once and use the @uipkge-react/<name> short form anywhere.

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/button.json

$npx shadcn@latest add https://uipkge.dev/r/react/button.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/button.json

$bunx shadcn@latest add https://uipkge.dev/r/react/button.json

Named registry:npx shadcn@latest add @uipkge-react/button

Paste the URL of any item from /react/components or /react/blocks. Transitive registry deps come along automatically.

Or register the named registry once in components.json:

components.json

{
  "registries": {
    "@uipkge-react": "https://uipkge.dev/r/react/{name}.json"
  }
}

Configure once, then @uipkge-react/<name> works anywhere shadcn does.

Sanity check

page.tsx

import { Button } from '@/components/ui/button'

// then in your JSX:
//   <Button>Hello uipkge</Button>

See a styled button? You're set.

Browse 128 components Browse 436 blocks Or start from a template

Known rough edges

Cosmetic noise you'll see during install. None of these break anything; they're listed so you can ignore them without wondering.

"Circular dependency detected in registry items" during init.json. False positive from the resolver — the init → {tailwind, utils, use-theme} graph is acyclic. Install completes cleanly.
First dev start after install is slow while Vite optimises the new dependency graph (reka-ui / radix, lucide, class-variance-authority, etc). Subsequent starts are instant.