Animate UI

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

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 { Outlet, createRootRoute } 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 shadcn init command to setup your project:

npx shadcn@canary 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 shadcn@canary 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>
  );
}

TanStack Start

On this page