Installation

Create a Next.js project

Start by creating a new Next.js project if you don't have one set up already.

pnpm create next-app@latest my-app --typescript --tailwind --app
cd my-app

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

bunx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

yarn create next-app@latest my-app --typescript --tailwind --app
cd my-app

Install shadcn/ui

UP Kit is built on top of shadcn/ui. Set it up in your project:

pnpm dlx shadcn@latest init

npx shadcn@latest init

bunx shadcn@latest init

yarn dlx shadcn@latest init

Follow the prompts to configure your components.json. We recommend:

• Style: Default
• Base color: Slate
• CSS variables: Yes

Install utilities

If the libs/utils.ts file is not present in your project, you can install it using the following command:

pnpm dlx shadcn@latest add https://kit.uxpatterns.dev/r/utils.json

npx shadcn@latest add https://kit.uxpatterns.dev/r/utils.json

bunx shadcn@latest add https://kit.uxpatterns.dev/r/utils.json

yarn dlx shadcn@latest add https://kit.uxpatterns.dev/r/utils.json

Configure namespaced registries (Recommended)

For a cleaner installation experience, you can configure namespaced registries in your components.json file. This allows you to use @namespace/component syntax instead of full URLs.

Add the registries object to your existing components.json:

{
  ...
  "registries": {
    "@upkit": "https://kit.uxpatterns.dev/r/{name}.json"
  }
}

Add your first component

Now you can start adding UP Kit components to your project using either method:

pnpm shadcn@latest add @upkit/button

npx shadcn@latest add @upkit/button

bunx shadcn@latest add @upkit/button

yarn shadcn@latest add @upkit/button

pnpm dlx shadcn@latest add https://kit.uxpatterns.dev/r/button.json

npx shadcn@latest add https://kit.uxpatterns.dev/r/button.json

bunx shadcn@latest add https://kit.uxpatterns.dev/r/button.json

yarn dlx shadcn@latest add https://kit.uxpatterns.dev/r/button.json

Then import and use the components in your project:

import { Button } from "@component/upkit/button"

export default function HomePage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Understanding namespaced registries

The namespaced registry system in shadcn CLI 3.0+ provides several benefits:

Benefits:

• Cleaner syntax: Use @upkit/button instead of long URLs
• Better organization: Clear separation between different component libraries
• Easier discovery: More intuitive component names
• Multiple registries: Support for multiple component sources in one project

Example with multiple registries:

{
  "registries": {
    "@upkit": "https://kit.uxpatterns.dev/r/{name}.json",
    "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
    "@tailark": "https://tailark.com/r/{name}.json"
  }
}

Usage:

# Install from UP Kit
npx shadcn@latest add @upkit/button

# Install from other registries
npx shadcn@latest add @kibo-ui/gantt
npx shadcn@latest add @tailark/hero

Backward compatibility: The old URL-based method still works for users who prefer it or need to install from unregistered sources:

npx shadcn@latest add https://kit.uxpatterns.dev/r/button.json

Done! 🎉

You can now use the UP Kit CLI to add components, or manually copy-paste them from the documentation.