# tailgrids

> [DEPRECATED] Use @tailgrids/cli instead. Previously: Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.

Latest version **2.4.0** (published 2026-03-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tailgrids
pnpm add tailgrids
yarn add tailgrids
bun add tailgrids
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.4.0 |
| Published | 2026-03-29 |
| First published | 2022-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 1649 |
| Author | TailGrids Team |
| Maintainers | tailgridshq, johurul_haque, naim-pimjo |
| Keywords | component-library, ui-components, tailwind, react-components, vue-components, tailwindcss, tailwind-css, alpinejs, tailwindui, tailwind-ui, tailwind-blocks, css, html, template, components, ui, landing-page, blocks, free, tailgrids, tailwind-ui, vuejs, reactjs, frontend, web-development, responsive-design, design-system, ui-kit, vue-ui, react-ui, javascript, frontend-components, design-library, ui-library, web-components, headless-ui, vue, react, single-page-applications, spa, high-performance, reusable-components, vue-templates, react-templates, tailwind-css-sections, tailgrids, flowbite, daisyui |

## Links

- npm: https://www.npmjs.com/package/tailgrids
- Repository: https://github.com/TailGrids/tailgrids
- Homepage: https://tailgrids.com/
- Issues: https://github.com/TailGrids/tailgrids/issues
- npm.io page: https://npm.io/package/tailgrids

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.4.0 (latest) — 2026-03-29
- 2.3.0 — 2025-03-20
- 2.2.7 — 2024-08-14
- 2.2.6 — 2024-07-03
- 2.2.5 — 2024-07-03
- 2.2.3 — 2024-07-01
- 2.2.2 — 2024-06-10
- 2.2.1 — 2024-06-05
- 2.2.0 — 2024-04-29
- 2.1.0 — 2023-10-31
- 2.0.3 — 2023-08-01
- 2.0.2 — 2023-07-24
- 2.0.1 — 2023-01-15
- 2.0.0 — 2022-11-10
- 1.1.7 — 2022-04-18
- … 8 more at https://npm.io/package/tailgrids/versions

## README

# ⚠️ This package is DEPRECATED

> **The `tailgrids` npm package has been deprecated in favor of [`@tailgrids/cli`](https://www.npmjs.com/package/@tailgrids/cli).**

## Migration Guide

The new `@tailgrids/cli` package provides a modern CLI-based workflow for managing TailGrids components in your projects. Instead of installing a monolithic package, you can now initialize your project and selectively add only the components you need.

### Step 1: Remove the old package

```bash
npm uninstall tailgrids
```

### Step 2: Initialize your project with the new CLI

```bash
npx @tailgrids/cli@latest init
```

This will:
- Create a `tailgrids.config.json` configuration file
- Generate a `tailgrids.css` file with base styles or directly override your main css file depending on your selection
- Add a `cn` utility file for merging Tailwind CSS classes
- Install necessary dependencies (`clsx`, `tailwind-merge`, `@tailwindcss/forms`)

### Step 3: Add components as needed

```bash
npx @tailgrids/cli@latest add <component-id>
```

For example:

```bash
npx @tailgrids/cli@latest add button
```

Components are copied directly into your project (usually `components/tailgrids/core/`), giving you full control to customize them.

### Step 4: Remove the old plugin import

If you had the old plugin in your CSS file:

```diff
- @plugin 'tailgrids/plugin'
```

---

## Why the change?

- **Smaller footprint** — Only install the components you actually use
- **Full customization** — Components live in your project, not in `node_modules`
- **Modern CLI workflow** — Standardized setup with `init` and `add` commands
- **Better DX** — Automatic dependency management and project configuration

## Links

- 📦 **New package:** [@tailgrids/cli on npm](https://www.npmjs.com/package/@tailgrids/cli)
- 📃 **Documentation:** [tailgrids.com/docs](https://tailgrids.com/docs)
- 🌏 **Website:** [tailgrids.com](https://tailgrids.com)
- 🚀 **Components:** [tailgrids.com/components](https://tailgrids.com/components)

## License

TailGrids Core Version is 100% Free and open-source. You can use it with your personal or commercial projects.

---
_Source: https://npm.io/package/tailgrids · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._