Install and configure Preskok UI for TanStack Start.
Start by creating a new TanStack Start project by following the Build a Project from Scratch guide on the TanStack Start website.
Do not add Tailwind yet. We'll install Tailwind v4 in the next step.
Install tailwindcss and its dependencies.
npm install tailwindcss @tailwindcss/postcss postcssCreate a postcss.config.ts file at the root of your project.
export default {
plugins: {
"@tailwindcss/postcss": {},
},
}app/styles/app.cssCreate an app.css file in the app/styles directory and import tailwindcss
@import "tailwindcss" source("../");app.cssimport type { ReactNode } from "react"
import { createRootRoute, Outlet } from "@tanstack/react-router"
import { Meta, Scripts } from "@tanstack/start"
import appCss from "@/styles/app.css?url"
export const Route = createRootRoute({
head: () => ({
meta: [
{
charSet: "utf-8",
},
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{
title: "TanStack Start Starter",
},
],
links: [
{
rel: "stylesheet",
href: appCss,
},
],
}),
component: RootComponent,
})Add the following code to the tsconfig.json file to resolve paths.
{
"compilerOptions": {
"jsx": "react-jsx",
"moduleResolution": "Bundler",
"module": "ESNext",
"target": "ES2022",
"skipLibCheck": true,
"strictNullChecks": true,
"baseUrl": ".",
"paths": {
"@/*": ["./app/*"]
}
}
}Run the shadcn CLI to set up Preskok UI and install your first component:
npx shadcn@latest init @preskok/default @preskok/buttonThis will create a components.json file in the root of your project and configure CSS variables inside app/styles/app.css.
The command above will add the Button component to your project. You can then import it like this:
import { Button } from "@/components/ui/preskok-ui/button"
function Home() {
const router = useRouter()
const state = Route.useLoaderData()
return (
<div>
<Button>Click me</Button>
</div>
)
}