Figma Tailwind UI Components
Curated collection of Figma design kits, UI components, templates, icons, and plugins built for Tailwind CSS. Everything designers and developers need to bridge the design-to-code gap.
Filter by category or price
Compare design kits and plugins
Visit the resource to download
Showing 22 resources across 6 categories
Tailwind UI Figma Kit
Official Design Kits
The official Tailwind Labs design kit matching every tailwindui.com component. Includes all variants, responsive states, and auto-layout for pixel-perfect handoff.
500+ components
shadcn/ui Figma Kit
Official Design Kits
Official Figma kit for shadcn/ui with every component variant. Built with proper auto-layout and design tokens that map directly to Tailwind CSS variables.
40+ components
Radix UI Figma Kit
Official Design Kits
Unstyled primitive components matching Radix UI. Perfect for teams building custom design systems on top of accessible, headless primitives with Tailwind styling.
30+ components
Untitled UI
Community Design Systems
The most detailed Figma UI kit available with 10,000+ components across 1,000+ screens. Includes design tokens, auto-layout, and dark mode support out of the box.
10,000+ components
Flowbite Design System
Community Design Systems
Open-source Figma kit that mirrors every Flowbite Tailwind component. Maintained alongside the code library so designs and implementation stay in sync.
600+ components
DaisyUI Figma
Community Design Systems
Component library matching the DaisyUI Tailwind plugin. Covers buttons, cards, modals, tabs, and 30+ themes with proper color token mapping.
50+ components
Preline UI Figma
Community Design Systems
Over 300 components matching the Preline Tailwind library. Covers navigation, forms, overlays, and data display with responsive variants included.
300+ components
Meraki UI Figma
Community Design Systems
Handcrafted Tailwind components in Figma with clean, minimal aesthetics. Focused on quality over quantity with thoughtfully designed sections and layouts.
Mosaic Figma
Dashboard Templates
Admin dashboard template featuring charts, data tables, forms, and analytics views. Designed for SaaS admin panels with a clean, professional layout.
100+ components
Windmill Dashboard
Dashboard Templates
Dark-themed admin dashboard template with sidebar navigation, data cards, and chart widgets. Clean design that translates directly to Tailwind utility classes.
50+ components
Tailwind Admin Kit
Dashboard Templates
Complete admin UI in Figma covering user management, settings, analytics, and CRUD interfaces. Built with consistent spacing and Tailwind color tokens.
80+ components
Notus Figma
Dashboard Templates
Creative Tim dashboard template with cards, charts, maps, and notification components. Free tier includes core dashboard views with Tailwind-based styling.
100+ components
Cruip Templates
Landing Pages
SaaS landing page templates designed for startups. Includes hero sections, feature grids, pricing tables, and testimonial blocks ready for Tailwind implementation.
Treact
Landing Pages
Seven distinct landing page designs covering SaaS, agency, restaurant, hotel, and event use cases. Each design maps to a ready-made Tailwind React template.
Tailwind Landing Kit
Landing Pages
Startup and SaaS landing page components including heroes, CTAs, feature showcases, and footer sections. Modular design for mixing and matching sections.
Heroicons Figma
Icons & Illustrations
The official Tailwind CSS icon set available in Figma. Includes outline, solid, and mini variants for all 300+ icons with proper naming conventions.
300+ components
Lucide Figma
Icons & Illustrations
Beautiful, consistent icon set used by shadcn/ui and many Tailwind projects. Over 1,500 icons with customizable stroke width and size in Figma.
1,500+ components
Tabler Icons
Icons & Illustrations
Over 5,000 open-source SVG icons designed on a 24x24 grid. Consistent stroke width and rounded corners that pair well with Tailwind design systems.
5,000+ components
Figma to Tailwind CSS
Figma Plugins
Convert Figma designs directly to Tailwind CSS utility classes. Inspects layers and generates responsive, production-ready class strings from your designs.
Locofy Plugin
Figma Plugins
AI-powered Figma to code conversion with first-class Tailwind CSS support. Generates clean React components with proper Tailwind classes and responsive breakpoints.
Anima Plugin
Figma Plugins
Export Figma designs as React components with Tailwind CSS styling. Supports auto-layout conversion, responsive design, and component-level code generation.
Inspect to Tailwind
Figma Plugins
Copy Tailwind utility classes directly from Figma inspect panel. Maps Figma properties like spacing, colors, and typography to their Tailwind equivalents.
Get the PM Toolkit Cheat Sheet
50 tools and 880+ resources mapped across 6 categories. A 2-page PDF you'll actually use.
Instant PDF download. One email per week after that.
Want full SaaS idea playbooks with market research?
Explore Ideas Pro →