Installation

As Tailgrids is heavily dependent on Tailwind, before installing Tailgrids, make sure you have a React project set up with Tailwind CSS. You can follow the Tailwind CSS installation guide to set up Tailwind CSS in your react project.

Set up Tailgrids in your React project in just a few minutes.

Install and Initialize

Run this command in your project root:

npx @tailgrids/cli@latest init

This initializes TailGrids by installing required dependencies, generating the config file, and adding base styles.

Add Styles

Copy the contents of tailgrids.css into your main CSS file, such as globals.css or app.css, and make sure it’s included in your build.

Add a Component

Use the CLI to add a component to your project:

npx @tailgrids/cli@latest add button

This will generate the component files in your project structure.

Use the Component

Import and use the component in your app:

import { Button } from "@/components/core/button";

export default function Home() {
  return <Button variant="primary">Hello TailGrids!</Button>;
}

You’re now ready to build with TailGrids. Add more components, customize styles, and scale as your project grows.

• Framework Guides – Learn how to use Tailgrids with different frameworks

• Components – Browse all available UI components