A curated list of cool UI libraries, frameworks, tools, tutorials, courses, and other resources that I have used, explored, or discovered.
A collection of UI libraries and frameworks for building stunning user interfaces. Name - Description (⭐️
GitHub Stars| 🏷Freemium| 🛠Framework)
- TailwindCSS - Rapidly build modern websites without ever leaving your HTML. (⭐️
86.7k| 🏷Freemium| 🛠CSS) - UnoCSS - Instant On-demand Atomic CSS Engine. (⭐️
17.4k| 🏷Freemium| 🛠CSS) - MasterCSS - The CSS language and framework for rapidly building modern and high-performance websites. (⭐️
1.9k| 🏷Freemium| 🛠CSS) - Twind - The smallest, fastest, most feature complete tailwind-in-js solution in existence. (⭐️
3.8k| 🏷Freemium| 🛠CSS) - Open Props - CSS custom properties to help accelerate adaptive and consistent design. (⭐️
5k| 🏷Freemium| 🛠CSS)
- BootStrap - Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. (⭐️
172k| 🏷Freemium| 🛠CSS) - Bulma - Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. (⭐️
49.7k| 🏷Freemium| 🛠CSS) - Materialize - A modern responsive front-end framework based on Material Design. (⭐️
38.9k| 🏷Freemium| 🛠CSS) - Metro UI - Metro UI is a free, open source, html-first toolkit for developing web sites with HTML, CSS, and JS. With Metro UI, you can easily and quickly make a reactive site from prototype to production. (⭐️
7k| 🏷Freemium| 🛠CSS) - UIKit - UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. (⭐️
18.4k| 🏷Free| 🛠CSS)
- PicoCSS - A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. (⭐️
14.6k| 🏷Freemium| 🛠CSS) - WaterCSS - Water.css is a drop-in collection of CSS styles to make simple websites like this just a little bit nicer. (⭐️
8.4k| 🏷Freemium| 🛠CSS) - SimpleCSS - Simple.css is a CSS template that allows you to make a good looking website really quickly. (⭐️
4.6k| 🏷Freemium| 🛠CSS) - BaseCSS - BaseCSS is a minimal and flexible CSS library designed for fast, responsive, and maintainable web development. (⭐️
1| 🏷Freemium| 🛠CSS)
- Daisy UI - daisyUI is the Tailwind CSS plugin you will love! It provides useful component class names to help you write less code and build faster. (⭐️
36.1k| 🏷Freemium| 🛠Tailwind) - Flowbite - Start developing with an open-source library of over 600+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma. (⭐️
8.4k| 🏷Free| 🛠Tailwind) - HyperUI - HyperUI is a collection of free Tailwind CSS components that can be used in your next project. (⭐️
11k| 🏷Freemium| 🛠Tailwind + React + Vue) - PrelineUI - 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. (⭐️
5.4k| 🏷Freemium| 🛠Tailwind + React + Vue+) - Shadcn UI - A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code. (⭐️
84.3k| 🏷Freemium| 🛠React) - Radix UI - An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required. (⭐️
6.5k| 🏷Freemium| 🛠React) - Ariakit - Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps. (⭐️
8k| 🏷Free| 🛠React) - Kokonut UI - 100+ Open Source UI components built with Tailwind CSS and shadcn/ui perfect for React and Next.js. (⭐️
692| 🏷Free| 🛠React) - Prime React - Elevate your web applications with PrimeReact's comprehensive suite of customizable, feature-rich UI components. (⭐️
7.6k| 🏷Freemium| 🛠React) - Origin UI - Origin UI is an extensive collection of copy-and-paste components for quickly building application UIs. (⭐️
6k| 🏷Freemium| 🛠React) - Floating UI - A JavaScript library to position floating elements and create interactions for them. (⭐️
30.9k| 🏷Freemium| 🛠React + Vue) - Number Flow - An animated number component for React, Vue, Svelte, and TS/JS. (⭐️
5.9k| 🏷Freemium| 🛠React + Vue) - Shadcn Vue - Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source. (⭐️
6.7k| 🏷Freemium| 🛠Vue) - Reka UI - An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects. (⭐️
4.6k| 🏷Freemium| 🛠Vue) - Inpira UI - Inspira UI is a collection of elegant, ready-to-use Vue components designed to be flexible and easy to integrate. (⭐️
2.2k| 🏷Freemium| 🛠Vue) - Stunning UI - Stunning UI is a collection of interactive Tailwind CSS components built for Vue and Nuxt. (⭐️
319| 🏷Freemium| 🛠Vue) - Vant UI - A lightweight, customizable Vue UI library for mobile web apps. (⭐️
23.7k| 🏷Freemium| 🛠Vue) - Maz UI - Collection of standalone components, plugins, directives, composables and more for Vue & Nuxt. (⭐️
502| 🏷Freemium| 🛠Vue) - Floating Vue - floating-vue is a library helping you add tooltips, dropdowns and other poppers into your Vue application. (⭐️
3.4k| 🏷Freemium| 🛠Vue) - Naive UI - A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast. (⭐️
16.9k| 🏷Freemium| 🛠Vue) - Animated Lucide Vue - Animated Lucide Icons for vue using the new motion-vue library. (⭐️
117| 🏷Freemium| 🛠Vue) - PrimeVue - Enhance your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier. (⭐️
12.2k| 🏷Freemium| 🛠Vue) - Origin UI Vue - Origin UI - Vue is a collection of copy-and-paste components for quickly building app UIs using Vue. (⭐️
143| 🏷Freemium| 🛠Vue) - Una UI - The Atomic UI framework for Nuxt, powered by Unocss engine 💛. (⭐️
538| 🏷Freemium| 🛠Vue) - UI Thing - A set of components created with Radix-Vue. Inspired by shadcn/ui & shadcn-vue. (⭐️
459| 🏷Freemium| 🛠Vue) - Nuxt UI - Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI. (⭐️
4.7k| 🏷Free| 🛠Vue)
Useful tools and websites to enhance UI development and design. Name - Description (⭐️
GitHub Stars| 🏷Freemium)
- BGJar - Free svg background generator for your websites, blogs and app. (🏷
Free) - Pattern Pad - With PatternPad you can create unlimited unique pattern designs that fit your style. Ideal for branding, presentations, social media posts or customising products. (🏷
Freemium) - Gradient Style - It is a gradient generator that supports wide-gamut, Color 4-compliant gradients using color spaces like Oklab, Oklch, etc. (🏷
Freemium) - Motify X - An innovative collection of mesmerizing background patterns crafted for modern developers and designers. From sleek geometric shapes to cyberpunk-inspired animations, MotifyX offers a diverse range of customizable patterns that will bring your designs to life. (🏷
Freemium)
- UI Colors - Generate, edit, save and share Tailwind CSS color shades based on a given hex, oklch or HSL color. (🏷
Free) - HueTools - A free color mixer, blender, info and modifier tool. Mix multiple colors, get links for design inspiration (⭐️
435| 🏷Freemium) - 3rd Color - 3rd Color is a powerful, user-friendly app that offers color information, color conversions, color modification, and other color manipulation features. (⭐️
4| 🏷Freemium) - Colorable - Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines. (⭐️
2k| 🏷Freemium) - AIColors - Create cool and unique color palettes with our AI-powered color palette generator. Browse, edit, and visualize your palettes to find the perfect combination for your project. (🏷
Freemium) - Coolors - Create the perfect palette or get inspired by thousands of beautiful color schemes. (🏷
Free)
- CSS Grid Generator - Generate basic CSS Grid code to make dynamic layouts! (⭐️
5.2k| 🏷Freemium) - Flexbox Lab - Flexbox Labs is a visual tool that helps you create layouts using CSS Flexbox. It offers an intuitive interface that shows changes in real-time, making it easy to experiment and learn. (⭐️
2.4k| 🏷Freemium) - Rollout AI - Build Stunning Websites and Apps
with AI. (🏷
Free) - Tailwind Generator - Collection of useful tools and generators for Tailwind to create, design and customize all kind of web components using a graphical editor. (🏷
Freemium) - Table Generator - Create, design and customize your own tables online using a graphical editor. (🏷
Freemium)
- SVG Mix - Download thousands of free SVG icons, vector collections & brand logos. (🏷
Freemium) - SVG Repo - Search, explore and edit the best-fitting free icons or vectors for your projects using a wide variety vector library. (🏷
Freemium) - Iconify Icons - Open source vector icons from all popular icon sets. (⭐️
746| 🏷Freemium) - Font Awesome - Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. (⭐️
74.8k| 🏷Freemium) - Material Symbols - Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. (⭐️
51.3k| 🏷Freemium) - Svgl - A beautiful library with SVG logos (⭐️
3.8k| 🏷Freemium)
- Google Fonts - Making the web more beautiful, fast, and open through great typography. (⭐️
18.7k| 🏷Freemium) - DaFonts - Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity. (🏷
Free) - FontGet - Download Free Fonts for your website, Mac, Windows, Linux, iOS and Android. (🏷
Freemium) - FreeFace Gallery - This website is a curated collection of typefaces that are available under a variety of free licences somewhere on the interwebs. (🏷
Freemium) - Font Squirrel - Font Squirrel scours the internet for high quality, legitimately free fonts. Download thousands of completely legal, high quality, free fonts. (🏷
Freemium) - Typ - Here at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they're using and how they're using them. We want to know what font goes with what. (🏷
Freemium) - GridLover - Establish a typographic system with modular scale & vertical rhythm. (🏷
Freemium)
Learn how to create amazing UIs with these tutorials and courses. Name (🏷
Price)
- Web Design For Beginners (🏷
Freemium) - Learn Web Design For Beginners (🏷
Freemium)
- UI Design (🏷
Freemium) - UI/UX Design For Beginners with Projects (🏷
Freemium) - Learn UI/UX (🏷
Freemium) - Complete UX & Design Systems Course (🏷
Freemium)
- Figma for Beginners (🏷
Freemium) - Figma Full Course 2025 (🏷
Freemium)
Contributions are welcome! If you know any awesome UI libraries, tools, or resources, feel free to submit a pull request.