Next.js Installation

Create project

Create a new Next.js project with TypeScript and Tailwind CSS:

npx create-next-app@latest --ts --tailwind --import-alias "@/"

Follow the prompts to complete the project setup.

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 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

The command will add the component to your project and you can use it like this:

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.