tanstack start

Install and configure @gentleduck/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.

npm install tailwindcss @tailwindcss/postcss postcss
npm install 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": {},
  },
}
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("../");
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,
})
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/*"]
    }
  }
}
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}

Run the CLI

Run the @gentleduck/ui init command to setup your project:

npx @gentleduck/cli init
npx @gentleduck/cli init

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

You can now start adding components to your project.

npx @gentleduck/cli add button
npx @gentleduck/cli add button

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