Preline UI, crafted with Tailwind CSS
- Compatible with:
- HTML
- React
- Vue
Preline UI is an open-source Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, plugins, Figma design system and more.
![Hero Image](./assets/thumbnails/hero/card-6.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-6.webp)
![Hero Image](./assets/thumbnails/hero/card-13.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-13.webp)
![Hero Image](./assets/thumbnails/hero/card-9.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-9.webp)
![Hero Image](./assets/thumbnails/hero/card-16.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-16.webp)
![Hero Image](./assets/thumbnails/hero/card-6.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-6.webp)
![Hero Image](./assets/thumbnails/hero/card-13.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-13.webp)
![Hero Image](./assets/thumbnails/hero/card-9.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-9.webp)
![Hero Image](./assets/thumbnails/hero/card-16.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-16.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-10.webp)
![Hero Image](./assets/thumbnails/hero/card-10.webp)
![Hero Image](./assets/thumbnails/hero/card-7.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-7.webp)
![Hero Image](./assets/thumbnails/hero/card-11.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-11.webp)
![Hero Image](./assets/thumbnails/hero/card-14.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-14.webp)
![Hero Image](./assets/thumbnails/hero/card-12.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-12.webp)
![Hero Image](./assets/thumbnails/hero/card-5.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-5.webp)
![Hero Image](./assets/thumbnails/hero/card-10.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-10.webp)
![Hero Image](./assets/thumbnails/hero/card-7.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-7.webp)
![Hero Image](./assets/thumbnails/hero/card-11.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-11.webp)
![Hero Image](./assets/thumbnails/hero/card-14.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-14.webp)
![Hero Image](./assets/thumbnails/hero/card-12.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-12.webp)
![Hero Image](./assets/thumbnails/hero/card-5.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-5.webp)
![Hero Image](./assets/thumbnails/hero/card-1.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-1.webp)
![Hero Image](./assets/thumbnails/hero/card-4.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-4.webp)
![Hero Image](./assets/thumbnails/hero/card-8.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-8.webp)
![Hero Image](./assets/thumbnails/hero/card-15.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-15.webp)
![Hero Image](./assets/thumbnails/hero/card-2.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-2.webp)
![Hero Image](./assets/thumbnails/hero/card-1.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-1.webp)
![Hero Image](./assets/thumbnails/hero/card-4.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-4.webp)
![Hero Image](./assets/thumbnails/hero/card-8.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-8.webp)
![Hero Image](./assets/thumbnails/hero/card-15.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-15.webp)
![Hero Image](./assets/thumbnails/hero/card-2.webp)
![Hero Image](./assets/thumbnails/hero-dark/card-2.webp)
795+ Free Components & Examples
Hundreds of component examples for all your website needs that meet accessibility criteria.
Universal Framework Compatibility
Preline UI is fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
Dark Mode
All components include a dark variant that lets you style your site differently when dark mode is enabled.
Get Started for Free
Bring your ideas to life in no time. Preline UI provides all the essential components you need to convert your vision into thriving start-ups.
Over
200+Examples
Kick-start your project effortlessly with Preline UI's wide range of examples and layouts using Tailwind CSS.
View Examples
Tailwind CSS Plugins
Completely unstyled, fully accessible UI plugins for popular features.
See how it works
The Wall of Love
Thoughts from those who've experienced Preline UI 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](https://pbs.twimg.com/profile_images/1725229810199433217/vRRTtvYo_400x400.jpg)
Muttaqi
Underratted
![Hillary Onyechekwa](https://pbs.twimg.com/profile_images/1718709549417328640/QMgl1BaR_x96.jpg)
Hillary Onyechekwa
Preline UI is freaking amazing. How is it free again? I'm in love man. 😍
![by a Preline UI user](https://preline.co/assets/img/160x160/img1.jpg)
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](https://ph-avatars.imgix.net/4294070/56f597a9-2aa4-4a16-85aa-bf61693f23fe.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=40&h=40&fit=crop&dpr=2)
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](https://pbs.twimg.com/profile_images/1816539336902606850/FBRtfmcN_400x400.jpg)
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](https://pbs.twimg.com/profile_images/1702282249968713729/2ypR85Is_400x400.jpg)
Bonnie
I am working on my website landing page and prebuilt TailwindCSS UI components from http://preline.co are a lifesaver.
![RichCode](https://pbs.twimg.com/profile_images/1688871312926629888/6rTYMS8V_x96.jpg)
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](https://pbs.twimg.com/profile_images/1673743359674925079/aQXWvhsD_x96.jpg)
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](https://pbs.twimg.com/profile_images/1718709549417328640/QMgl1BaR_x96.jpg)
Hillary Onyechekwa
Preline UI is freaking amazing. How is it free again? I'm in love man. 😍
![by a Preline UI user](https://preline.co/assets/img/160x160/img1.jpg)
by a Preline UI user
Continue what you're doing. You're such a great help to a lot of developers. Thank you!
![RichCode](https://pbs.twimg.com/profile_images/1688871312926629888/6rTYMS8V_x96.jpg)
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](https://pbs.twimg.com/profile_images/1673743359674925079/aQXWvhsD_x96.jpg)
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!
Tailwind CSS Components
Based on the Tailwind CSS utility classes, Preline UI's prebuilt components and UI elements help you quickly design and customize responsive mobile-first websites.
Starter Pages & Examples
Kick-start your project effortlessly with Preline UI's wide range of examples, using pre-built UI parts, custom components and layouts using Tailwind CSS.
Templates
Free, ready-to-use templates to build your projects at lightning speed, perfect for anyone looking to save time without sacrificing quality.
Preline UI Figma
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.
![Dashboard Home Page](./assets/img/mockups/img14.png)
![Tokens](./assets/img/mockups/tokens.png)
![Dark Layer](./assets/img/mockups/dark.png)
![Auto Layout](./assets/img/mockups/auto-layout.png)
Download Preline UI
Our code is available for you to download, inspect, and modify: