UI Kits & Templates for Developers

1. Material-UI mui.com React components implementing Material Design.
2. Bootstrap getbootstrap.com Open-source HTML/CSS/JS framework for responsive sites.
3. Start Bootstrap startbootstrap.com Free Bootstrap templates and themes.
4. Freebiesbug freebiesbug.com Free design resources like UI kits and mockups.

Fonts & Typography Tools

1. Google Fonts fonts.google.com Open-source fonts optimized for the web.
2. Fontsource fontsource.org Self-host Google Fonts in your projects.
3. FontPair fontpair.co Curated font pairings for designers.
4. Typewolf typewolf.com Typography inspiration and resources.

Best Color Tools Available

1. Coolors coolors.co Generate color palettes instantly.
2. Adobe Color color.adobe.com Create and explore color schemes.
3. Color Hunt colorhunt.co Curated color palettes for designers.
4. uiGradients uigradients.com Beautiful CSS gradient combinations.

Icons & Illustrations

1. Font Awesome fontawesome.com Free icon library with 1,600+ icons for web projects.
2. Material Icons fonts.google.com/icons Google’s open-source icon set for Material Design.
3. Feather Icons feathericons.com Lightweight, customizable SVG icons.
4. Heroicons heroicons.com MIT-licensed icons by Tailwind CSS creators.
5. unDraw undraw.co Open-source illustrations for websites and apps.
6. Humaaans humaaans.com Mix-and-match illustrations of people in modern styles.

Tools for Stock Photos & Videos

1. Unsplash unsplash.com High-resolution, royalty-free photos for commercial use.
2. Pexels pexels.com Free stock photos and videos under a Creative Commons license.
3. Pixabay pixabay.com Free images, videos, and music for commercial projects.
4. Burst by Shopify burst.shopify.com Free stock photos for e-commerce and startups.
5. Coverr coverr.co Free stock videos for landing pages and backgrounds.

Design & Prototyping Tools

Photo by Amélie Mourichon on Unsplash

1. Figma figma.com Collaborative design tool with vector graphics, prototyping, and developer handoff features. Free for individuals.
2. Adobe XD adobe.com/xd UI/UX design and prototyping tool with free starter plans for small projects.
3. Canva canva.com Drag-and-drop design platform with free templates for social media, presentations, and more.
4. InVision invisionapp.com Prototyping and collaboration tool with a free plan for up to 3 projects.
5. Marvel marvelapp.com Simple prototyping tool for creating interactive wireframes. Free for 1 user.

The Best Design Inspiration

Photo by UX Store on Unsplash

1. Awwwards awwwards.com Showcase of cutting-edge web design trends.
2. Dribbble dribbble.com Platform for designers to share portfolios and UI concepts.
3. Behance behance.net Adobe’s platform for creative work, including UX case studies.
4. SiteInspire siteinspire.com Organized examples of outstanding web design.

Prototyping & Testing Tools

1. Proto.io proto.io Interactive prototyping tool with a 15-day free trial.
2. Framer framer.com Prototyping tool with free tier for small projects.

Best Accessibility Resources

1. WebAIM webaim.org Accessibility resources, including contrast checker and guides.
2. WAVE Evaluation Tool wave.webaim.org Test website accessibility directly in your browser.
3. A11y Project a11yproject.com Community-driven accessibility checklist and guides.

Learning Resources (Communities)

1. Smashing Magazine smashingmagazine.com Articles on UX, design, and front-end development.
2. UX Design.cc uxdesign.cc Curated UX articles and case studies.
3. FreeCodeCamp freecodecamp.org Free coding tutorials, including responsive design and JavaScript.

Patterns & Textures

Photo by NIKHIL on Unsplash

1. Hero Patterns heropatterns.com Free SVG background patterns for websites.
2. Transparent Textures transparenttextures.com Subtle textures for backgrounds.

Mockups

Photo by Mediamodifier on Unsplash

1. Smartmockups smartmockups.com Free device and apparel mockup generator.
2. Mockup World mockupworld.co Free PSD and Figma mockups for branding.

Animation Libraries

1. Animate.css animate.style Cross-browser CSS animations library.
2. LottieFiles lottiefiles.com Lightweight JSON animations for your applications and personal & business websites.

Chrome Extensions

1. WhatFont chrome.google.com/webstore/detail/whatfont Identify fonts on any website.
2. ColorZilla colorzilla.com Color picker, gradient generator, and palette tool.

Design Systems

1. GOV.UK Design System design-system.service.gov.uk UK government’s open-source design system.
2. IBM Carbon carbondesignsystem.com IBM’s design system for enterprise applications.

Image Optimization

1. TinyPNG tinypng.com Compress PNG and JPEG images without quality loss.
2. Squoosh squoosh.app An Open-source image compression tool by Google.

Collaboration Tools

1. Miro miro.com Free collaborative whiteboard for brainstorming and wireframing.
2. Trello trello.com Project management tool.

Writing & Content

1. Hemingway Editor hemingwayapp.com Simplifies complex sentences and improves readability for UX copy.
2. Grammarly grammarly.com Free writing assistant to enhance clarity and grammar in UI text.
3. Readable readable.com Analyzes text readability and suggests improvements.

User Testing & Feedback

1. Maze maze.co User testing platform with a free tier for prototypes and surveys.
2. Useberry useberry.com Prototype testing with heatmaps and analytics (A free plan is available).
3. Hotjar hotjar.com Heatmaps, session recordings, and feedback polls (free basic plan).
4. Optimal Workshop optimalworkshop.com Free tools for card sorting and tree testing.

Code Snippets & Repos

1. CodePen codepen.io Front-end code playground for sharing UI components and animations.
2. CSS-Tricks css-tricks.com Guides, snippets, and tutorials for CSS/JS design patterns.
3. GitHub Gist gist.github.com Share code snippets and reusable UI components.

CSS Generators & Tools

1. CSS Grid Generator cssgrid-generator.netlify.app Visual tool to create complex grid layouts.
2. Flexbox Froggy flexboxfroggy.com Fun and Interactive game to learn Flexbox.
3. Keyframes.app keyframes.app Generate CSS animations and keyframes visually.
4. Neumorphism.io neumorphism.io Soft UI shadow generator for modern designs.

Design Challenges

1. Daily UI dailyui.co 100-day email challenge to practice UI design.
2. Frontend Mentor frontendmentor.io Build real-world projects with free design files.

SVG & Shape Tools

1. Get Waves getwaves.io Generate customizable SVG waves for section dividers.
2. Blobmaker blobmaker.app Create organic SVG blob shapes for backgrounds.
3. Shape Divider shapedivider.app Export animated SVG dividers for websites.

3D Assets

1. Sketchfab sketchfab.com Free 3D models for AR/VR and web projects.
2. OpenGameArt opengameart.org Royalty-free 3D assets and textures.

Sound Effects

1. Freesound freesound.org Community-driven library of free sound effects.
2. Zapsplat zapsplat.com High-quality sounds for interactions and animations.

Legal & Privacy

1. Privacy Policy Generator privacypolicygenerator.info Generate GDPR/CCPA-compliant privacy policies.
2. Terms of Service Generator termsofservicegenerator.net Create free ToS documents for apps/websites.

No-Code Tools

1. Webflow webflow.com Design and launch responsive sites visually (free starter plan).
2. Glide glideapps.com Turn spreadsheets into mobile apps without coding.

Design Communities

1. Designer Hangout designerhangout.co Slack community for UX/UI professionals.
2. UX Mastery uxmastery.com Forums and resources for UX learners.

Podcasts

1. UI Breakfast uibreakfast.com Podcast on UI/UX trends and tools.
2. Design Details designdetails.fm Deep dives into design systems and workflows.

Newsletters

1. Sidebar sidebar.io Daily links to the best design articles.
2. UX Design Weekly uxdesignweekly.com Curated UX resources delivered weekly.

Browser Tools

1. Lighthouse developers.google.com/web/tools/lighthouse Audit site performance, accessibility, and SEO.
2. Responsive Design Checker responsivedesignchecker.com Test responsive layouts across devices.

Miscellaneous Freebies

1. Notion notion.so Free workspace for design documentation and collaboration.
2. Cool Backgrounds coolbackgrounds.io Generate gradient/patterned backgrounds for mockups.
3. UI Sounds uisounds.prototypr.io Free interaction sound effects for prototypes.
4. The Noun Project thenounproject.com Free icons with attribution (CC license).
5. Freepik freepik.com Free vectors, PSDs, and stock photos (attribution required).
6. Lapa Ninja lapa.ninja A gallery of over 2,000 top landing page examples, providing a wealth of design inspiration.
7. Lottie airbnb.io/lottie Lightweight animations for apps and websites.
8. Flowkit flowkit.com Free wireframing and user flow tools.
9. Zeroheight zeroheight.com Free tier for documenting design systems.
10. FigmaCrush figmacrush.com Free Figma templates, plugins, and UI kits.
11. Design Resources designresourc.es Mega-list of free tools, fonts, and assets.

Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

https://pixijs.com

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web!

A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming). Under the hood, Nest makes use of robust HTTP Server frameworks like Express (the default) and optionally can be configured to use Fastify as well! Nest provides a level of abstraction above these common Node.js frameworks (Express/Fastify), but also exposes their APIs directly to the developer. This gives developers the freedom to use the myriad of third-party modules which are available for the underlying platform.

Philosophy

In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both front and backend applications. This has given rise to awesome projects like Angular, React and Vue, which improve developer productivity and enable the creation of fast, testable, and extensible frontend applications. However, while plenty of superb libraries, helpers, and tools exist for Node (and server-side JavaScript), none of them effectively solve the main problem of architecture. Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications. The architecture is heavily inspired by Angular.

https://nestjs.com

Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.