🎉 Awesome Front‑End Templates & Components
A curated, duplicate‑free list of ready‑made UI kits, component libraries, design systems and code snippets that you can drop straight into your projects (React, Vue, Svelte, Angular, plain HTML / CSS, Tailwind, etc.). Each entry includes a short description and a direct link to the source.
How to contribute – Fork the repo, add a new entry under the proper category (keep rows alphabetised), and open a Pull Request. See the contribution guide at the bottom of the file.
📦 Table of Contents
- CSS Frameworks & Utility Libraries
- Component Libraries (React, Vue, Svelte, Angular)
- Tailwind‑CSS UI Kits & Component Packs
- Design Systems & Style Guides
- Figma / Sketch / Adobe XD UI Kits
- Icon & Illustration Sets
- Animation & Motion Libraries
- Form & Input Libraries
- Grid & Layout Systems
- Dark‑Mode & Theming Packs
- Contribution Guide
🎨 CSS Frameworks & Utility Libraries
| Library | Description | URL |
|---|---|---|
| Bootstrap 5 | Classic responsive grid & components, now fully CSS‑utility‑first. | https://getbootstrap.com/ |
| Bulma | Modern flexbox‑based framework, no JavaScript dependencies. | https://bulma.io/ |
| UIKit | Light‑weight modular CSS/JS framework with a rich component set. | https://getuikit.com/ |
| Semantic UI | Human‑readable HTML class names; extensive theming options. | https://semantic-ui.com/ |
| Materialize CSS | Google‑Material‑Design components built with CSS & JS. | https://materializecss.com/ |
| Spectre.css | Minimal, responsive CSS library (≈ 10 KB). | https://picturepan2.github.io/spectre/ |
| Milligram | Minimalist CSS framework (≈ 2 KB) for rapid prototyping. | https://milligram.io/ |
| Shoelace | Custom‑element based UI component library (Web Components). | https://shoelace.style/ |
| Pure.css | Set of small, responsive CSS modules by Yahoo. | https://purecss.io/ |
| Windi CSS | Tailwind‑compatible, on‑demand utility generator (very fast). | https://windicss.org/ |
⚙️ Component Libraries (React / Vue / Svelte / Angular)
| Stack | Library | Description | URL |
|---|---|---|---|
| React | Chakra UI | Accessible, composable primitives; dark‑mode ready. | https://chakra-ui.com/ |
| Mantine | Rich collection of hooks, components, and utilities. | https://mantine.dev/ | |
| React‑Bootstrap | Bootstrap components rebuilt as React components. | https://react-bootstrap.github.io/ | |
| React‑Select | Flexible, searchable dropdown/select component. | https://react-select.com/ | |
| React‑Hook‑Form | Performant form validation using React hooks. | https://react-hook-form.com/ | |
| Radix UI | Unstyled, accessible primitives for building custom UI. | https://www.radix-ui.com/ | |
| Headless UI | Completely unstyled, fully accessible UI components (React & Vue). | https://headlessui.com/ | |
| Blueprint | UI toolkit for data‑intensive desktop‑like web apps. | https://blueprintjs.com/ | |
| Vue | Vuetify 3 | Material Design component framework for Vue 3. | https://vuetifyjs.com/ |
| Quasar | Cross‑platform Vue UI library (SPA, PWA, Mobile, Desktop). | https://quasar.dev/ | |
| VueUse | Collection of essential Vue composition utilities. | https://vueuse.org/ | |
| VeeValidate | Form validation for Vue (template‑ and composition‑API friendly). | https://vee-validate.logaretm.com/ | |
| Element Plus | UI library based on the popular Element design system (Vue 3). | https://element-plus.org/ | |
| Svelte | Svelte Material UI | Material Design components for Svelte. | https://sveltematerialui.com/ |
| SvelteStrap | Bootstrap 4 components written for Svelte. | https://sveltestrap.js.org/ | |
| svelte‑headless‑ui | Port of Radix‑style headless UI primitives for Svelte. | https://github.com/rgossiaux/svelte-headless-ui | |
| Angular | NG‑Zorro | Ant Design component library for Angular. | https://ng.ant.design/ |
| PrimeNG | Rich set of UI components (tables, charts, editors) for Angular. | https://primefaces.org/primeng/ | |
| Angular Material | Official Material Design components for Angular. | https://material.angular.io/ | |
| Nebular | Customizable UI Kit, Auth, & Security components for Angular. | https://akveo.github.io/nebular/ |
🌈 Tailwind‑CSS UI Kits & Component Packs
| Kit | Highlights | URL |
|---|---|---|
| Tailwind UI (by the Tailwind team) | Production‑ready, fully responsive components (e.g., navbars, modals). | https://tailwindui.com/ |
| DaisyUI | Tailwind plugin that adds component classes (buttons, cards, alerts). | https://daisyui.com/ |
| Flowbite | UI components built on Tailwind with dark‑mode support. | https://flowbite.com/ |
| Headless UI (Tailwind friendly) | Accessible unstyled primitives, perfect for pairing with Tailwind. | https://headlessui.com/ |
| Windmill | Minimal UI kit with dark mode and authentication screens. | https://windmillui.com/ |
| Meraki UI | Open‑source collection of Tailwind components for dashboards. | https://merakiui.com/ |
| Tailblocks | Ready‑made Tailwind blocks (hero, pricing, FAQ) for rapid assembly. | https://tailblocks.cc/ |
| Kutty | Tiny Tailwind component library focusing on form elements. | https://kutty.netlify.app/ |
| HyperUI | Free Tailwind component library with multiple variations per pattern. | https://hyperui.dev/ |
| Sleek UI | Minimalist Tailwind UI kit for SaaS landing pages. | https://sleekui.dev/ |
🏗 Design Systems & Style Guides
| System | Platform / Language | Notable Features | URL |
|---|---|---|---|
| Carbon Design System | React, Web Components, Vanilla CSS | IBM’s enterprise‑grade UI kit, accessibility‑focused. | https://carbondesignsystem.com/ |
| Zeroheight | Design‑to‑code documentation | Syncs Figma/Sketch tokens to living style guides. | https://zeroheight.com/ |
| Material‑UI (MUI) | React | Google Material Design with theming, CSS‑in‑JS. | https://mui.com/ |
| Evergreen (Segment) | React | UI toolkit for enterprise web apps, robust theming. | https://evergreen.segment.com/ |
| Base Web (Uber) | React | Accessible, customizable components, design‑token system. | https://baseweb.design/ |
| Lightning Design System (Salesforce) | Lightning Web Components | Rich component library for enterprise SaaS. | https://www.lightningdesignsystem.com/ |
| Polaris (Shopify) | React | Shopify’s admin UI component library. | https://polaris.shopify.com/ |
| ATLAS (Atlassian) | React & CSS | Design language for Atlassian products, token‑driven. | https://atlassian.design/ |
| Clarity Design System (VMware) | HTML/CSS/JS | Accessible components, utility classes. | https://clarity.design/ |
| Fluent UI (Microsoft) | React, Web Components | Office 365 style system, high accessibility. | https://developer.microsoft.com/en-us/fluentui |
🎨 Figma / Sketch / Adobe XD UI Kits
| Kit | Type | Description | URL |
|---|---|---|---|
| Tailwind UI Kit for Figma | Figma | 350+ Tailwind‑styled components, ready to export. | https://www.figma.com/community/file/1267321578475482527 |
| Material Design Kit for Sketch | Sketch | Official Google Material icons & components for Sketch. | https://www.sketchappsources.com/free-source/3325-material-design-ui-kit-sketch-freebie-resource.html |
| Ant Design UI Kit for Adobe XD | Adobe XD | Complete set of Ant Design components for prototyping. | https://xd.adobe.com/ideas/kit/ant-design-ui-kit/ |
| Bootstrap 5 UI Kit for Figma | Figma | Pre‑built Bootstrap components, ready for hand‑off. | https://www.figma.com/community/file/1031434627547132295 |
| Eva Design System for Sketch | Sketch | Minimalist UI kit with 260+ symbols. | https://www.eva.design/kits |
| Carbon Design Kit for Figma | Figma | IBM Carbon components adapted for Figma. | https://www.figma.com/community/file/872865388424306870 |
| Primer UI Kit for Adobe XD | Adobe XD | GitHub’s design system components for XD. | https://www.adobe.com/products/xd.html (search “Primer UI Kit”) |
| Shoelace UI Kit for Sketch | Sketch | Component library based on the Shoelace web‑components. | https://www.sketchappsources.com/free-source/4975-shoelace-ui-kit-sketch.html |
| PrimeNG UI Kit for Figma | Figma | PrimeNG components visually represented for rapid prototyping. | https://www.figma.com/community/file/1014500410840136092 |
| Semantic UI Kit for Sketch | Sketch | Full set of Semantic UI elements for Sketch. | https://www.sketchappsources.com/free-source/4115-semantic-ui-kit-sketch.html |
🖼️ Icon & Illustration Sets
| Set | Format | Description | URL |
|---|---|---|---|
| Feather Icons | SVG, PNG | Minimal line icons (MIT). | https://feathericons.com/ |
| Tabler Icons | SVG, React, Vue | 1500+ pixel‑perfect icons (MIT). | https://tabler-icons.io/ |
| Heroicons | SVG, React, Vue | Outline & solid icons by the Tailwind team. | https://heroicons.com/ |
| Boxicons | SVG, CSS, JS, React, Vue | 1500+ icons with a focus on simplicity. | https://boxicons.com/ |
| Iconify | 100+ collections, unified API | One‑stop shop for any icon set. | https://iconify.design/ |
| Lordicon | Animated SVG icons | Interactive hover/active icons (free & paid). | https://lordicon.com/ |
| Unicons | SVG, PNG, webfont | Premium smooth icons (free for personal use). | https://iconscout.com/unicons |
| Flaticon | SVG, PNG, EPS | Huge library (free with attribution). | https://www.flaticon.com/ |
| Open Moji | PNG, SVG, Emojis | Open‑source emoji set. | https://openmoji.org/ |
| **Illustrations by Storyset | SVG, customizable colors | Ready‑made illustration packs for UI. | https://storyset.com/ |
🎞️ Animation & Motion Libraries
| Library | Stack | What It Provides | URL |
|---|---|---|---|
| Lottie‑Web | JS / JSON | Render After Effects animations as lightweight JSON. | https://github.com/airbnb/lottie-web |
| Framer Motion | React | Declarative animation, layout‑shift, shared‑layout transitions. | https://www.framer.com/motion/ |
| GSAP (GreenSock) | Vanilla / React / Vue / Svelte | High‑performance timeline‑based animations. | https://greensock.com/gsap/ |
| Anime.js | Vanilla JS | Simple yet powerful animation engine. | https://animejs.com/ |
| Motion One | Vanilla JS | Small (2 KB) animation library by Framer. | https://motion.dev/ |
| Rive | Web, iOS, Android | Real‑time interactive vector animations. | https://rive.app/ |
| ScrollReveal | Vanilla JS | Scroll‑triggered reveal animations. | https://scrollrevealjs.org/ |
| AOS (Animate On Scroll) | Vanilla JS | Simple scroll animations with CSS classes. | https://michalsnik.github.io/aos/ |
| Hover.css | CSS | Collection of CSS hover effects. | https://ianlunn.github.io/Hover/ |
| Magic‑CSS | CSS | Fancy CSS effects (glow, neon, etc.). | https://github.com/kingdido999/magic-css |
📝 Form & Input Libraries
| Library | Stack | Description | URL |
|---|---|---|---|
| React‑Hook‑Form | React | Performant, uncontrolled form validation. | https://react-hook-form.com/ |
| Formik | React | Form state management, validation with Yup. | https://formik.org/ |
| VeeValidate | Vue | Easy form validation & error handling. | https://vee-validate.logaretm.com/ |
| Svelte‑Forms‑Lib | Svelte | Declarative form handling & validation. | https://github.com/tjinauyeung/svelte-forms-lib |
| Angular Reactive Forms | Angular | Official reactive form module (built‑in). | https://angular.io/guide/reactive-forms |
| Tailwind‑Forms | Tailwind CSS | Pre‑styled form components via plugin. | https://github.com/tailwindlabs/tailwindcss-forms |
| Uniforms | React, GraphQL | Auto‑generate forms from schemas (JSON, SimpleSchema). | https://uniforms.tools/ |
| React‑Select | React | Searchable, async dropdown UI component. | https://react-select.com/ |
| Vue‑Form‑Generator | Vue | Drag‑and‑drop form builder based on JSON schema. | https://github.com/icebob/vue-form-generator |
| Bulma‑Extensions – Bulma‑Calendar | Bulma | Datepicker component for Bulma forms. | https://github.com/Wikiki/bulma-calendar |
📐 Grid & Layout Systems
| System | Stack | Highlights | URL |
|---|---|---|---|
| CSS Grid Layout | Native CSS | Two‑dimensional layout with fractional units. | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout |
| Flexbox Grid | CSS | Simple flex‑based grid system for quick prototyping. | https://flexboxgrid.com/ |
| Bootstrap Grid | CSS/JS | 12‑column responsive grid with utilities. | https://getbootstrap.com/docs/5.3/layout/grid/ |
| Tailwind CSS Grid | Tailwind | Utility classes for grid‑template‑rows/columns. | https://tailwindcss.com/docs/grid-template-columns |
| Bulma Columns | CSS | Responsive column system using flexbox. | https://bulma.io/documentation/columns/ |
| Masonry.js | Vanilla JS | Pinterest‑style layout for variable‑height items. | https://masonry.desandro.com/ |
| CSS‑Grid‑Responsive‑Layout (GitHub) | CSS | Example layouts for modern responsive design. | https://github.com/utk09/css-grid-responsive-layout |
| Rowgrid | CSS | Minimal 12‑column grid with zero‑dependencies. | https://github.com/rowgrid/rowgrid |
| CSS‑Tricks – CSS Grid Cheat Sheet | CSS | Handy reference for grid properties. | https://css-tricks.com/snippets/css/complete-guide-grid/ |
| Responsive‑Breakpoints | CSS/JS | Visual breakpoint generator for responsive design. | https://breakpoints.app/ |
🌙 Dark‑Mode & Theming Packs
| Pack | Stack | What It Provides | URL |
|---|---|---|---|
| Tailwind Dark Mode | Tailwind CSS | Utility‑first dark‑mode classes (dark: variant). |
https://tailwindcss.com/docs/dark-mode |
| DaisyUI Themes | Tailwind CSS | 30+ ready‑made dark & light themes. | https://daisyui.com/docs/themes/ |
| Dark‑Mode‑CSS | CSS | Simple mixin to generate dark‑mode styles. | https://github.com/egoist/dark-mode-css |
| MUI Dark Theme | React (MUI) | Built‑in dark palette with theming support. | https://mui.com/customization/palette/#dark-mode |
| Chakra UI Color Mode | React (Chakra) | useColorMode hook for toggling dark/light. |
https://chakra-ui.com/docs/styled-system/color-mode |
| Ant Design Dark Theme | React (AntD) | Configurable dark theme via ConfigProvider. |
https://ant.design/docs/react/customize-theme |
| Vuetify Dark Theme | Vue (Vuetify) | Integrated dark mode toggle (theme.dark). |
https://vuetifyjs.com/en/features/theme/ |
| Bootstrap Darkly | Bootstrap | Pre‑built dark theme (bootswatch.com/darkly). |
https://bootswatch.com/darkly/ |
| Carbon Dark Theme | React (Carbon) | Switchable theme (useDarkMode hook). |
https://carbon-design-system.github.io/carbon-components-react/?path=/story/components-theme--default |
| Tailwind‑Components – Dark‑Mode Pack | Tailwind CSS | Collection of dark‑mode ready UI components. | https://tailwindcomponents.com/collection/dark-mode |
✅ Contribution Guide
-
Fork this repository.
-
Add a new entry under the appropriate section (or create a new section if you’ve found a completely new category).
-
Keep rows alphabetised within each table.
-
Use the exact markdown format:
markdown
| **Name** | **Brief description (max 2 lines)** | <https://example.com> |
-
-
Do not duplicate any URL that already appears in this file.
-
Run any lint/validation script (if provided) to catch broken links.
-
Commit with a clear message, e.g.,
Add <Tool> to Tailwind UI Kits. -
Open a Pull Request – describe why the tool is valuable and which category it belongs to.
-
The PR will be reviewed; once approved it will be merged into the master list.
License – All content in this list is released under the CC0‑1.0 (public domain) licence. Feel free to reuse, remix, or publish it anywhere.
Happy building! 🚀
No comments:
Post a Comment