Manual Installation

Follow these steps to set up Tailgrids UI in your existing project.

Install Tailwind CSS

Ensure your project has Tailwind CSS installed and configured.

Initialize Tailgrids

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

npx @tailgrids/cli@latest init

Follow the prompts to configure your project structure and path aliases.

Configure Styles

Copy the contents of the generated tailgrids.css file and paste them into your main CSS file (e.g., src/styles.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 Example() {
  return <Button>Click me</Button>;
}

Note: You may need to update the import path based on your project structure.