Laravel

Create project

Start by creating a new Laravel project with Inertia and React using the laravel installer laravel new my-app:

laravel new my-app --react

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/switch

The command above will add the Switch component to resources/js/components/caprice-ui/switch.tsx. You can then import it like this:

import { Switch } from "@/components/caprice-ui/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}

export default MyPage

Create project

Start by creating a new Laravel project with Inertia and React using the laravel installer laravel new my-app:

laravel new my-app --react

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 { Switch } from "@caprice-ui/react/switch"

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}

export default MyPage