UIPackage
Menu

Framework

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

Setup. One command.

Tokens, helpers, and the theme provider — installed with one npx. Files copy into your repo. You own them.

Bootstrap

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

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. 1. Install Tailwind v4 + the PostCSS plugin

    terminal 
    npm install -D tailwindcss @tailwindcss/postcss postcss typescript

  2. 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. 3. Add PostCSS config for Tailwind v4

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

export default config

  4. 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.

02

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-react named registry. Writing it yourself skips both. Our registry items target ~/app/... directly, so files land in 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"
  }
}
03

Bootstrap your project

~10s · 4 files
$ npx 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.

init lib

One-shot bootstrap. Pulls tailwind tokens, the cn() helper, and the theme provider/useTheme hook in a single command. Run this first when starting a new app.
tailwind style

Tailwind v4 design tokens (light + dark), motion tokens, base layer styling, and shadow utilities. Identical token set to the Vue/Nuxt registry — tokens are framework-neutral. Ships the full canonical tailwind.css as `files` content; the cssVars block stays as a merge safety net for consumers with a pre-existing globals.css.
utils lib

Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.
use-theme hook

Theme provider + useTheme hook (next-themes). ThemeProvider injects a blocking script that sets the dark class before first paint (no flash on reload); useTheme reads/sets the active theme. The React/Next equivalent of the Vue useTheme composable.
04

Add any component

118 primitives · 50 blocks

Copy the source into your project — you own it, no semver, edit freely. Install by direct URL, or register the named registry once and use the @uipkge-react/<name> short form anywhere.

$ npx 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.

05

Sanity check

page.tsx (or any component) 
import { Button } from '@/components/ui/button'

// then in your JSX:
//   <Button>Hello uipkge</Button>
See a styled button? You're set.
Browse 118 components Browse 50 blocks Or start from a template
06

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.