Next.js Installation

Follow these steps to create and set up Tailgrids UI in a fresh Next.js project.

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.

Configure Styles

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

Make sure you have imported the CSS file in your root layout.

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:

src/app/page.tsx

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.