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

Follow the prompts to configure your project.

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.