Codelevate symbol
LIFETIME ACCESS

Figma design system based on Tailwind CSS

Boost Your Figma Designs with our easy-to-use Figma design system based on Tailwind CSS and choose from 400+ component variants, 50+ responsive pages, dark mode, and auto-layout features

1800+ downloads on Figma

Preview in Figma

400+
UI components
100+
Ready-made sections
50+
Responsive pages
1800+
Downloads on Figma

All-in-one design system

Everything you need to build a comprehensive SaaS platform, E-commerce or Website

400+ UI components

Choose from different button components, navigation bars, input fields, lists, forms and 400+ more UI components

  • Checkmark
    All components have properties, auto-layout and variants
  • Checkmark
    Based on Tailwind CSS
  • Checkmark
    Choose from 400+ UI components
Figma Design System Tailwind CSS
Figma Design System Tailwind CSS

Dark mode

All of the components, sections, and pages fully support dark version in the form of Figma variants

  • Checkmark
    Switch between white or dark mode with one click
  • Checkmark
    Easily edit and revert back changes
  • Checkmark
    Choose from 50+ ready-made dark mode sections
Get lifetime access

50+ pre-built pages

Our design system offers a comprehensive suite of 50+ custom pages, featuring everything from application UI dashboards to marketing landing pages. Every page is responsive, supports dark mode, and is simple to customize with Figma variants for seamless editing

  • Checkmark
    Save time designing websites from scratch
  • Checkmark
    Switch between white or dark mode with one click
  • Checkmark
    Choose from E-commerce, SaaS or marketing pages
Figma Design System Tailwind CSS

Trusted by over 1,800+ designers and developers

Thoughts from those who've experienced our Figma design system based on Tailwind CSS

Great resource! Looking forward to start designing with this design system.

Niki

UX/UI Designer

Incredible one, it saves so much time and hassle! Especially the variables and pre-built pages. Highly recommend!

Jakub

Developer

That looks pretty damn good! It's a great resource to get started a new project fast. Easy to use and update.

Marius

UX/UI Designer

We can finally use one source of truth between designers and developers. This is the ultimate design system for all our projects. Thank you, guys! 

Maria

Software developer

Choose your favourite plan

Trusted globally by freelancers, startups, businesses, and enterprises

Basic
Free
Single license
€89.99
Team license
€169.99
User license
1 user
1 user
Core UI components
Text styles
Shadow styles
Component variants
Properties
Auto-layout
Dark mode
400+ UI components
Icons (by Heroicons)
Illustrations (by Freesvgillustration) 
100+ UI sections
Application UI pages
E-commerce UI pages
Marketing UI pages

Common questions

What does the free version include?

Our free Figma Design System, inspired by Tailwind CSS, includes essential UI components like buttons, input fields, a style guide, typography, and more. You ca download it for free in Figma: https://www.figma.com/community/file/1274269619515529174

What does "lifetime access" exactly mean?

By purchasing Tailwind CSS Figma Design System 2.0, you secure lifetime access to the product along with all future updates at no additional cost.

What is the difference between single and team license?

The single license is designed for individual use in Figma, perfect for freelancers or solo designers and developers. It cannot be shared with internal teams or other users.

For collaborative projects, opt for the team license, allowing you to share the Figma file with anybody in your team.

Can I use the design system for commercial purposes?

Definitely! This design system is perfect for any commercial project, from SaaS platforms to e-commerce apps, and application UIs. The only restriction is against reselling it as a design resource. Beyond that, you're free to use it for any commercial projects that you are currently workin on.

Can I create or sell templates or themes using it?

Our product is not permitted for use in creating templates, UI kits, dashboards, or web builders intended for distribution on your website or other marketplaces.

Prohibited uses include distributing Tailwind CSS Figma design system elements publicly, creating alternative versions of the design system, and developing website builder projects that compete directly with our products.

What is Tailwind CSS Figma Design system 2.0?

The Tailwind CSS Figma Design System 2.0, inspired by the Tailwind CSS framework, is a component library aimed at simplifying and accelerating web project setups for developers and designers. It comes in two editions: a free version and a premium (PRO) version.

Can I get invoice?

During the checkout process, you'll have the opportunity to include all personal or company details you wish to appear on the invoice. After your purchase, you will receive the invoice via email. If you miss filling in your information or don't receive the invoice, please contact us for assistance.