Quick Start

Browse and effortlessly copy-paste from over 800+ components and templates.

Quick Start

This guide will help you quickly set up and start using TailGrids components in your React project.

Initialize TailGrids

Run the init command to set up TailGrids in your project.

npx tailgrids@latest init

This will prompt you to:

• Select a theme for your components.
• Configure an import alias for your project.

The init command will create the following files:

• tailgrids.config.json: Configuration file for the TailGrids CLI.
• tailgrids.css: The base styles for TailGrids components.
• A cn utility file for merging Tailwind CSS classes.

It will also install the required dependencies (clsx, @tailwindcss/forms, and tailwind-merge).

Configure Your Project

After the init command finishes, you'll need to follow these steps:

Add Styles to Your Project

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

Add Components

Now you can start adding TailGrids components to your project using the add command.

npx tailgrids add <component-name>

For example, to add a button component, run:

npx tailgrids add button

This will add the button component to your project, and you can start using it right away.

Import and Use Components

You can now import and use the components you've added in your application.

import { Button } from '@/components/core/button'; // Adjust the import path based on your alias and component location

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Button variant="primary">Hello TailGrids!</Button>
    </main>
  );
}

This is a basic quick start. For more detailed usage, customization options, and a full list of available components, please refer to the other sections of our documentation.