Installation
Install and configure Caprice UI for React Router.
Create project
npx create-react-router@latest my-appRun the CLI
Run the shadcn init command to setup your project:
npx shadcn@latest init https://caprice-ui.com/r/init.jsonAdd 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/buttonThe command above will add the Button component to your project. You can then import it like this:
import { Button } from "~/components/caprice-ui/button"
import type { Route } from "./+types/home"
export function meta({}: Route.MetaArgs) {
return [
{ title: "New React Router App" },
{ name: "description", content: "Welcome to React Router!" },
]
}
export default function Home() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button>Click me</Button>
</div>
)
}Add all components at once
You can install all Caprice UI components at once with a single command:
npx shadcn@latest add @caprice/uiThe command above will add all caprice ui components to your project.
Create project
npx create-react-router@latest my-appInstall Caprice UI dependencies
npm install @caprice-ui/react @caprice-ui/tailwindConfigure 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"
import type { Route } from "./+types/home"
export function meta({}: Route.MetaArgs) {
return [
{ title: "New React Router App" },
{ name: "description", content: "Welcome to React Router!" },
]
}
export default function Home() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button>Click me</Button>
</div>
)
}