Installation
Install and configure Caprice UI for TanStack Router.
Create project
Start by creating a new TanStack Router project:
npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcnAdd 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 { createFileRoute } from "@tanstack/react-router"
import { Button } from "@/components/caprice-ui/button"
export const Route = createFileRoute("/")({
component: App,
})
function App() {
return (
<div>
<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
Start by creating a new TanStack Router project:
npx create-tsrouter-app@latest my-app --template file-router --tailwindInstall 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 { createFileRoute } from "@tanstack/react-router"
import { Button } from "@caprice-ui/react/button"
// or import { Button } from "@caprice-ui/react"
export const Route = createFileRoute("/")({
component: App,
})
function App() {
return (
<div>
<Button>Click me</Button>
</div>
)
}