Tailgrids
Open-source React UI library built with Tailwind and Figma
Start new thread

Tailgrids 3.0 - Open-source React UI library for Tailwind and AI Workflow

by•
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

Add a comment

Replies

Best
Maker
📌

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 add button. No more copy-paste.

  • 600+ handcrafted , & : Covering dashboards, SaaS, marketing, eCommerce, and AI products

  • TypeScript-first React architecture: Every component rebuilt for performance, tree-shaking, and modern React workflows.

  • Complete : 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: , Markdown docs, and more: Connect Tailgrids to LLMs and generate React components also markdown and files makes it more accessible for AI

  • Tailgrids : Searchable, themeable, copy as SVG or JSX

  • : Much improved and detailed developer docs, live previews, searchable, and contributor-friendly.

🔗 Useful Links

💜 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

 how does the theming handle dark mode transitions for custom tokens? does it auto generate the tailwind config?

Maker

 We're leveraging CSS variables to achieve that.

💡 Bright idea

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 🙌

Maker

 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.

Great work buddy as always! Best of luck!

Maker

 Thanks Mate, glad you like it 💜

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

Maker

 More or less we do it manually to keep the craftsmanship intact but we definitely have an optimized workflow.

 That's the honest answer. Most tools fake auto-sync and the result shows. Manual probably wins on quality.

Maker

 Yeah, indeed

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.

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.

Maker

 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.

 even DESIGN.md? That is cool. That will help to efficiently use Tailgrids. I will try. Are you open to get feedback?

Maker

 Yeah, sure - feel free to share your feedback!

Looks good! Congrats on the launch

Maker
Thank you 🙏

Hey , 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?

Great product, definitely trying it

Maker

 Thank you!

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?

Maker

 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 - to make the whole component library highly AI-readable and remix-friendly.