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

Note: If you have chosen not to replace the content of your main CSS file, you will need to copy and paste the styles of tailgrids.css into your main CSS file (e.g., src/app/globals.css or src/index.css).

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.