Preline UI Figma - crafted with Tailwind CSS styles
World's largest free Figma design system
Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.
Variables
Created adaptable designs with variables - from colors to spacing and border radius.
Dark mode
Now available in two colors: Light and Dark.
Variants and Properties
Best-in-class Figma variants allow you to alter certain predefined aspects of single components, to make any variant you like.
Grid System
Easily find UI elements
Browse dozens of components and drag them into the canvas from the Assets or Resources panel.
Auto layout and constraints
Components structured in a way that can automatically grow to fill or shrink to fit, and adapt to the size of its contents.
Endles s s s s s s s s s s
Tailwind CSS fontS i z e s
to choose fromColor styles
Extendable Beyond Imagination
It’s not just a website Preline UI Figma is capable of building - it can be an app, software, visuals or whatever genius idea you can think of.
Essential components
From charts to navbars, advanced forms, base components and more.
Accordion
7 components
Alerts
19 components
Avatar
185+ components
Badge/Tags
130+ components
Blockquotes
18 components
Buttons
1700+ components
Button Icons
1700+ components
Devices
4 components
Static Icons
140+ components
Lists
4 components
Legend Indicator
1 component
Progress
6 components
Loading State
4 components
Stepper
20+ components
Navs/Tabs
19 components
Switch
30 components
and more components...
Component categories
From grid layouts to charts, navbars, advanced forms, base components and more.
Components and variants
When it comes to Preline UI components and options, there are no limits.
Predefined examples
Hundreds of component examples for all your website needs.
The Wall of Love
Thoughts from those who've experienced Preline Figma in action.
Vosidiy Muslimbek
I don't know how to thank for such a good file, It should be paid product actually.
Thabresh Syed
Preline UI is a game-changer for anyone working with UI development! As a fan of open source projects and a lover of efficiency, I couldn't be happier with what Preline UI brings to the table. This set of prebuilt UI components takes the power of the popular Tailwind CSS framework and supercharges it, making the entire UI development process a breeze.
Vitor Machado
This is huge! I appreciate so much for the effort, such high quality file! big thanks! Is there a way to support you for your work?
Muttaqi
Underratted
Hillary Onyechekwa
Preline UI is freaking amazing. How is it free again? I'm in love man. 😍
by a Preline UI user
Continue what you're doing. You're such a great help to a lot of developers. Thank you!
Kevin Fairbanks
time saver for sure, beautiful designs wish I discovered sooner
Daniel
Hi there, I just wanted to say congrats on developing such an excellent Figma design system. I've spent months going around in circles looking for something that is complete and easily nk I've found my foundation. It's really excellent work you've done here. I'm looking forward to seeing where you take this.
Wasimul Sami
http://Preline.co is just amazing. @prelineUI, guys, unbelievably, you made it free. A lot of time saved for you guys. Thanks 🙏
Bonnie
I am working on my website landing page and prebuilt TailwindCSS UI components from http://preline.co are a lifesaver.
RichCode
Decide to try out @prelineUI on a new @nextjs project and have to say, it's pretty dope. Hooked on day one😄
Avvicy ❙ AI
Combining Tailwind CSS with Preline UI can definitely boost productivity. Preline UI offers additional components and features that can enhance your development process. Give it a try!
Hillary Onyechekwa
Preline UI is freaking amazing. How is it free again? I'm in love man. 😍
by a Preline UI user
Continue what you're doing. You're such a great help to a lot of developers. Thank you!
RichCode
Decide to try out @prelineUI on a new @nextjs project and have to say, it's pretty dope. Hooked on day one😄
Avvicy ❙ AI
Combining Tailwind CSS with Preline UI can definitely boost productivity. Preline UI offers additional components and features that can enhance your development process. Give it a try!
Get started now
Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.
Any Questions?
Answers to the most frequently asked questions.
Is Preline UI Figma Free?
Yes, it's free for both commercial and personal use. You may learn more about the terms on the license page.
Is Preline UI available in Sketch or Adobe XD?
Unfortunately, Preline UI Figma will only be available for Figma.
Can I use it for client projects?
Yes, you absolutely can.
How do I update Figma file with the latest version?
You can learn more here.
Is there a dark mode?
Unfortunately, the dark version is currently unavailable.
Is Preline UI Figma built on the latest Figma features?
Of course! It's built with everything that was announced at Config 2022.
What if I have a question and I need help?
See something that doesn't sound right, or perhaps could be done better? - we'd love to discuss it with you.