Tanstack Start Installation

Create project

Create a new Tanstack Start project:

npm create @tanstack/start@latest

Follow the prompts to configure your project with TypeScript and Tailwind CSS.

Initialize Tailgrids UI

Run the command in the CLI to initialize Tailgrids UI in your project:

npx @tailgrids/cli@latest init

Follow the prompts to configure Tailgrids UI

Configure Styles

Copy the contents of the generated tailgrids.css file and paste them into your main CSS file (e.g., src/styles.css).

Make sure your CSS file is imported in your root route.

Add Components

Use the CLI to add components to your project:

npx @tailgrids/cli@latest add button

Use the Component

Import and use the component in your application:

import { Button } from "@/components/tailgrids/core/button";

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

Note: You may need to update the import path based on your project structure.