preskok/ui

TanStack Start

PreviousNext

Install and configure Preskok UI for TanStack Start.

Create project

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.

Add Tailwind

Install tailwindcss and its dependencies.

pnpm add tailwindcss @tailwindcss/postcss postcss

Create postcss.config.ts

Create a postcss.config.ts file at the root of your project.

postcss.config.ts
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

Create app/styles/app.css

Create an app.css file in the app/styles directory and import tailwindcss

app/styles/app.css
@import "tailwindcss" source("../");

Import app.css

app/routes/__root.tsx
import 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,
})

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths.

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}

Run the CLI

Run the Preskok UI init command to set up your project and install your first component:

pnpm dlx preskok-ui@latest init button

This will create a components.json file in the root of your project and configure CSS variables inside app/styles/app.css.

That's it

The command above will add the Button component to your project. You can then import it like this:

app/routes/index.tsx
import { Button } from "@/components/ui/preskok-ui/button"
 
function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()
 
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
TanStack RouterVite