Next.js

Create project

Run the init command to create a new Next.js project or to setup an existing one:

npx shadcn@latest init https://caprice-ui.com/r/init.json

Run the init command to create a new Next.js project or to setup an existing one:

npx shadcn@latest init https://caprice-ui.com/r/init.json

Choose between a Next.js project or a Monorepo.

Add Caprice UI Registry to your components.json

{
  "registries": {
    "@caprice": "https://caprice-ui.com/r/{name}.json"
  }
}

Add Components

You can now start adding components to your project.

npx shadcn@latest add @caprice/button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "@/components/caprice-ui/button"

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

Create a new Next.js project

npx create-next-app@latest my-app

Install Caprice UI dependencies

npm install @caprice-ui/react @caprice-ui/tailwind

Configure styles

Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the theming section.

@import "tailwindcss";
@import "@caprice-ui/tailwind/themes/caprice";
@import "@caprice-ui/tailwind/preset";

@source "../node_modules/@caprice-ui";

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Import components

import { Button } from "@caprice-ui/react/button"
// or import { Button } from "@caprice-ui/react"

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