React Router Installation

Create project

Create a new React Router project:

npx create-react-router@latest my-app
cd my-app

Follow the prompts to complete the project setup.

Configure Path Aliases

Add @ as path alias into your tsconfig.json file.

tsconfig.json

{
  // ...
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"],
      "@/*": ["./*"]
    }
    //  ...
  }
}

Initialize Tailgrids

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

npx @tailgrids/cli@latest init

Configure Styles

Copy the contents of the generated tailgrids.css file and transition them into your main CSS file (e.g., src/app.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.