Ship production-ready websites and web apps faster with an open-source React + Figma UI system. 600+ components, blocks, and templates. Comes with a complete Figma kit and design system with 2,800+ variants - perfectly synced with code. TypeScript-first, CLI-powered, design-token driven, AI-ready workflow and more.
This is the 4th launch from Tailgrids. View more
Tailgrids 3.0
Launched this week
TailGrids 3.0 is a complete rebuild - a modern open-source React UI library and design system that unifies React, Tailwind and Figma.
Ship real-world web projects with 600+ components, blocks, and templates for dashboards, AI, ecommerce, SaaS, and marketing sites.
Includes CLI install, design tokens for theming, and an MCP server for AI-ready workflows. TypeScript-first, accessible, production-ready, with a Figma kit that mirrors the codebase 1:1
Free Options
Launch Team / Built With
Tailgrids
Hey Product Hunt Folks 👋
Super excited to finally share Tailgrids 3.0 with you all.
We have spent the last several months rebuilding Tailgrids from the ground up. The original goal was simple: keep what developers loved: Clean React UI components built on Tailwind CSS with modern consistent design and zero lock-in. We also rebuilt everything else for how dev and design teams actually ship today.
The result is a complete React UI system that bridges code and design, with a real CLI, full theming, and AI-ready workflows baked in.
✨ WHATS NEW IN TAILGRIDS 3:
CLI tooling: Install components in seconds with npx @tailgrids/cli@latest add button. No more copy-paste.
600+ handcrafted components, blocks & templates: Covering dashboards, SaaS, marketing, eCommerce, and AI products
TypeScript-first React architecture: Every component rebuilt for performance, tree-shaking, and modern React workflows.
Complete Figma design system: With 2,800+ variants, 900+ tokens, Auto Layout 5.0, fully synced with the codebase
Robust theming system: Design tokens for colors, typography, spacing, radius, and themes. Allows you to customize everything and switch between themes (dark/light/...)
Ready for AI Workflow: MCP server, Markdown docs, and more: Connect Tailgrids to LLMs and generate React components also markdown and DESIGN.md files makes it more accessible for AI
Tailgrids SVG icon library: Searchable, themeable, copy as SVG or JSX
New docs portal: Much improved and detailed developer docs, live previews, searchable, and contributor-friendly.
🔗 Useful Links
Public roadmap
Tailgrids on Github
Tailgrids on X/Twitter
Changelog / Update Logs
💜 We'd love your feedback
Specially on the new components, CLI workflow, the Figma kit, and the MCP integration.
Drop questions, ideas, or anything you'd want to see next. We're around all day 🙌
— Musharof from Tailgrids Team
PicWish
@musharofchy how does the theming handle dark mode transitions for custom tokens? does it auto generate the tailwind config?
Tailgrids
@mohsinproduct We're leveraging CSS variables to achieve that.
Tailgrids has been a solid go-to for Tailwind projects, a huge time-saver. Curious: how are you thinking about the AI workflow angle? Are we talking AI-assisted component generation, or more like ready-made blocks for AI product UIs (chat interfaces, dashboards, etc.)? That positioning could really differentiate from other Tailwind libraries.
Tailgrids
@rivra_dev Thanks for your kind words. For us, the AI angle is less about “generating random components with AI” and more about making AI-assisted workflows production-ready.
Right now, we offer workflow tools such as MCP, CLI, DESIGN .MD also all components and documentation in Markdown format, making it easier for AI tools to remix and work with them. Soon, we’ll also be working on AI-driven generators based on user demand.
@musharofchy even DESIGN.md? That is cool. That will help to efficiently use Tailgrids. I will try. Are you open to get feedback?
Tailgrids
@rivra_dev Yeah, sure - feel free to share your feedback!
How does the Figma + code sync actually work? auto when code changes, or manual? most UI libraries pick one side and skip the harder part
Tailgrids
@ebazan33 More or less we do it manually to keep the craftsmanship intact but we definitely have an optimized workflow.
@musharofchy That's the honest answer. Most tools fake auto-sync and the result shows. Manual probably wins on quality.
Tailgrids
@ebazan33 Yeah, indeed
The Figma-to-code sync being 1:1 is what stands out to me. We use Claude Code a lot and one of the recurring frictions is that it generates UI from scratch every time instead of using our existing design system. Can the MCP server feed your component library into an AI coding session so it builds with Tailgrids components by default instead of writing raw Tailwind?
Tailgrids
@ben_gend Exactly - that’s the core idea behind the MCP server.
Instead of Claude Code generating raw Tailwind from scratch every time, it can use TailGrids components, tokens, patterns, and variants as context inside the coding session. So the AI builds within your design system instead of drifting away from it.
That’s also why we built DESIGN.MD - to make the whole component library highly AI-readable and remix-friendly.
Hey @musharofchy , huge congrats on the Tailgrids 3.0 launch! It’s looking incredibly sharp.
I noticed a small 'ghost' bug on the landing page: there's a constant 404 in the console for /cdn-cgi/speculation. It looks like Cloudflare’s 'Speed Brain' is misfiring.
It's an easy fix in the Cloudflare dashboard (usually just needs a toggle or a specific header rule), but it's a bit distracting for devs checking out the library.
I’m an ex-Deutsche Bank dev and industrial business owner—I’ve got a few hours open today if you need a senior pair of hands to help squash launch-day bugs or optimize the Next.js flow while you're trending. Want me to send over the fix?
Timetics.ai
Love this direction 🚀
AI is definitely speeding up frontend development, but great UI still needs taste, structure, and personality. TailGrids 3.0 feels like a strong balance between speed and craftsmanship. Congrats on the launch and best wishes for Product Hunt 🙌
Tailgrids
@ehsan_riyadh Thanks a lot for the support and kind words, Really appreciate this ❤️
Yeah, That balance between speed and craftsmanship is exactly what we’re aiming for with Tailgrids 3.0. AI can help ship faster, but thoughtful UI still comes from human taste and attention to detail.
Cool. Ext JS grew on a similar idea, even before AI. For many years Ext was very popular among enterprise clients - we still sometimes maintain such legacy projects. But yes, it can’t really be compared with React; it’s the best JS framework today, and everyone uses it in AI.