How to install and set up Caprice UI components in your project.
Caprice UI Registry
If you already have your project setup with shadcn/ui, please skip to the registry configuration section.
Quick setup
npx shadcn@latest init https://caprice-ui.com/r/init.jsonnpm install @caprice-ui/react @caprice-ui/tailwindPick Your Framework
Start by selecting your framework of choice. Then follow the instructions to install the dependencies and structure your app.
Caprice UI is built to work with all React frameworks.
Next.js
Setup instructions for Next.js
Vite
Setup instructions for Vite
TanStack Start
Setup instructions for TanStack Start
TanStack Router
Setup instructions for TanStack Router
Astro
Setup instructions for Astro
Laravel
Setup instructions for Laravel
React Router
Setup instructions for React Router
Manual
Setup instructions for any React related framework
Configure registry
Add the Caprice UI registry to your components.json file.
{
"registries": {
"@caprice": "https://caprice-ui.com/r/{name}.json"
}
}Learn more about namespaces and how to use them in your project.
Install Caprice UI core & utils
npx shadcn@latest add @caprice/setupIt install the key dependencies, theme and utils.ts.
Setup Base UI Portals
Base UI uses portals for components that render popups, such as Dialog and Popover. To make portaled components always appear on top of the entire page, add the following style to your application layout root. Learn more
<body className="relative">
<div className="isolate">
{children}
</div>
</body>🎉 Voilà!
You can now start adding components to your project.
npx shadcn@latest add @caprice/buttonAlternatively, you can add all components at once with the following command:
npx shadcn@latest add @caprice/uiThis will add all caprice ui components to your project.