{"id":41215777,"url":"https://github.com/TailGrids/tailgrids","last_synced_at":"2026-02-01T09:00:45.331Z","repository":{"id":40375339,"uuid":"442484173","full_name":"TailGrids/tailgrids","owner":"TailGrids","description":"TailGrids is an open-source React UI library built with Tailwind CSS. It provides production-ready components, blocks, and templates to help you build modern, accessible web apps faster.","archived":false,"fork":false,"pushed_at":"2026-01-22T18:29:06.000Z","size":32965,"stargazers_count":1468,"open_issues_count":7,"forks_count":110,"subscribers_count":17,"default_branch":"main","last_synced_at":"2026-01-22T23:25:04.874Z","etag":null,"topics":["component-library","components","dark-mode","design-system","frontend","icons","nextjs-ui-components","react","react-components","react-tailwindcss","react-templates","react-ui-library","tailwind","tailwind-css","tailwind-ui","tailwindcss","ui-components","ui-kit","ui-library","vue-tailwindcss"],"latest_commit_sha":null,"homepage":"https://tailgrids.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TailGrids.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-12-28T14:13:30.000Z","updated_at":"2026-01-22T18:29:11.000Z","dependencies_parsed_at":"2023-02-09T22:01:22.275Z","dependency_job_id":"397548da-88fc-4cc6-9e5d-da9090a292f8","html_url":"https://github.com/TailGrids/tailgrids","commit_stats":{"total_commits":70,"total_committers":3,"mean_commits":"23.333333333333332","dds":0.4,"last_synced_commit":"31227f224e290a2392db06c0d459739471848302"},"previous_names":["tailgrids/tailgrids"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/TailGrids/tailgrids","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TailGrids","download_url":"https://codeload.github.com/TailGrids/tailgrids/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28974246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T08:16:14.655Z","status":"ssl_error","status_checked_at":"2026-02-01T08:06:51.373Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","components","dark-mode","design-system","frontend","icons","nextjs-ui-components","react","react-components","react-tailwindcss","react-templates","react-ui-library","tailwind","tailwind-css","tailwind-ui","tailwindcss","ui-components","ui-kit","ui-library","vue-tailwindcss"],"created_at":"2026-01-23T00:01:14.279Z","updated_at":"2026-02-01T09:00:45.320Z","avatar_url":"https://github.com/TailGrids.png","language":"TypeScript","readme":"# Free React UI Components powered by Tailwind CSS\n\nTailgrids is an open-source **React UI component library built with Tailwind CSS**. Ship modern web applications faster through an extensive collection of **production-ready components, blocks, and templates**. All featuring a **sleek, handcrafted, and pixel-perfect design optimized for exceptional user experience**, high performance, accessibility, and consistent UI across projects.\n\n[![Tailgrids](tailgrids.png)](https://tailgrids.com)\n\nBuild human-centered websites, dashboards, SaaS products, landing pages, and internal tools effortlessly, **without reinventing the UI from scratch or relying on the generic UI**\n\n---\n\n## 📦 Installation\n\nSet up Tailgrids in your React project in a few minutes.\n\n#### Install \u0026 Initialize\n\nRun this in your project root:\n\n```bash\nnpx @tailgrids/cli@latest init\n```\n\nThis sets up Tailgrids, creates the config and base styles, and installs required dependencies.\n\n#### Add Styles\n\nCopy the contents of `tailgrids.css` into your main CSS file, like `globals.css` or `app.css`.\n\n---\n\n#### Add a Component\n\nAdd components using the CLI:\n\n```bash\nnpx @tailgrids/cli@latest add button\n```\n---\n\n#### Use It\n\nImport and use the component:\n\n```jsx\nimport { Button } from \"@/components/core/button\";\n\nexport default function Home() {\n  return \u003cButton variant=\"primary\"\u003eHello Tailgrids!\u003c/Button\u003e;\n}\n```\n\n---\n\n### ✨ Feature Highlights\n\nTailgrids is built for real-world production. Every component follows modern UI patterns, feels natural to use, and works seamlessly with React and Tailwind CSS.\n\n* **High-quality premium design** – Clean, modern, and carefully crafted components that look polished out of the box\n* **100+ Essential free UI Components** – Buttons, forms, navbars, footers, cards, modals, alerts, dropdowns, and more\n* **Premium UI Blocks** – 500+ React UI blocks and components for applications, dashboards, e-commerce, and AI products\n* **React + TypeScript first-class support** – Fully rebuilt with JSX/TSX in V3\n* **Powered by Tailwind CSS** – Full control and easy customization with utility classes\n* **Production-ready** – Optimized for performance, accessibility (a11y), dark mode, and responsiveness\n* **Tailgrids CLI** – CLI for instant component installation (`npx tailgrids add button`)\n* Modern **design tokens** with a flexible theme system\n* Built-in support for - **React, Next.js** and all popular React-based frameworks\n* Unified free + pro ecosystem with a consistent design language\n* Beautiful **open-source SVG icon** library included\n---\n\n### 🔗 Useful Links\n\n* **Website** – [https://tailgrids.com](https://tailgrids.com)\n* **Documentation** – [https://tailgrids.com/docs](https://tailgrids.com/docs)\n* **Components** – [https://tailgrids.com/docs/components](https://tailgrids.com/docs/components)\n* **Blocks** – [https://tailgrids.com/blocks](https://tailgrids.com/blocks)\n* **Templates** – [https://tailgrids.com/templates](https://tailgrids.com/templates)\n* **Changelog \u0026 Updates** – [https://tailgrids.com/blog](https://tailgrids.com/blog)\n\n## ✨ What’s Included\n\n### React UI Components\nA growing collection of reusable React components covering all common UI needs:\n\n- Buttons, badges, alerts  \n- Forms, inputs, checkboxes, radios  \n- Modals, drawers, dropdowns  \n- Navigation, tabs, pagination  \n- Tables, lists, cards  \n- Pricing, testimonials, FAQs  \n- Authentication and onboarding sections  \n\n### UI Blocks\nPrebuilt UI blocks to speed up development:\n\n- Application UI Blocks and Components\n- Dashboards UI Blocks and Components\n- Marketing UI Blocks and Components\n- E-commerce UI Blocks and Components\n- AI UI Blocks and Components\n- and more\n\n  \n### Templates\nReady-to-use unique React based Tailwind CSS templates that combine components and blocks into complete pages and layouts.\n\n---\n\n## 🧠 Built for Developers and Designers\n\nTailgrids is built for real production teams - developers and designers alike.\nIt ships with a **detailed, enterprise-ready Figma design system that designers genuinely enjoy** working with.\n\nFor developers, Tailgrids focuses on long-term maintainability and a great DX:\n\n* Clean, readable React components\n* Utility-first styling with Tailwind CSS\n* Easy to customize and extend\n* No heavy dependencies\n* Works with Vite, Next.js, CRA, and other React setups\n\nBalanced for design and engineering, without compromises.\n\n\n---\n\n## ♿ Accessibility First\n\nAccessibility is not an afterthought.\n\n- Semantic markup  \n- Keyboard-friendly components  \n- Proper focus handling  \n- Screen reader-friendly patterns  \n- WCAG-aware design decisions  \n\n---\n\n## ⚡ Performance Optimized\n\n- Minimal CSS overhead  \n- Tree-shakeable components  \n- No unnecessary JavaScript  \n- Tailwind-powered styling for fast builds  \n\n---\n\n---\n\n\n\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTailGrids%2Ftailgrids","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTailGrids%2Ftailgrids","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTailGrids%2Ftailgrids/lists"}