Home

Awesome

Repository Banner

Please read contributing guidelines before submitting new resources.

Table of Contents

UI Graphics

Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI

Website                           Description
SVG sine wavesExport perfect sine waves as SVG for your front-end projects
UI Design DailyAwesome UI Components of all types
100 Daily UIFree Figma library of products, elements, and screens
Sketch App SourcesSketch UIs, wireframes, icons and much more
HumaaansCool illustrations of people with the ability to mix and match
PaaatternsFree collection of beautiful patterns for all vector formats
404 illustrationFree illustrations for 404 pages
Drawkit.ioIllustrations for designers and startups
Absurd.designFree surrealist illustrations for designers and developers
Undraw.coOpen-source illustrations for any idea you can imagine and create
Manypixels.coMonochromatic, Isometric high-quality illustrations
Open PeepsHand drawn illustration library
InvisionAppLibrary of free, high-quality UI kits, icon packs, and mockups
Open DoodlesA Free Set of Sketchy Illustrations
AvataaarsFree sketch library of avatars illustrations by Pablo Stanley
BlushFree customizable illustrations with Figma Plugin
Hero PatternsA collection of repeatable SVG background patterns
BEAUBUS PatternsA set of 150+ free SVG patterns (backgrounds)
IRA DesignAn open-source gradient illustrations collection by creative tim.
Transparent TexturesA collection of transparent textures background patterns.
icons8.com/illustrationsVector illustrations to class up your project
PatternicoSeamless Pattern Maker
Pixeltrue IllustrationsFree Animated Illustrations
Abstract User Avatar APIAPI to create simple yet flexible user avatars from user names or emails
sketchvalleyDownload free PNG, SVG or AI file .
PatternPadFree and unlimited unique pattern designs.
DimensionsDimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces
FreebiesbugHand-picked resources for web designers and developers, constantly updated.
FlexipleOne new high-quality, open-source illustration each day.
Cool TextCool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work
illustration kitPremium open source illustrations added daily
Doodad Pattern GeneratorCreate unique, seamless, royalty-free patterns.
Pattern MonsterA simple online pattern generator to create repeatable SVG patterns
ExemplarFree Avatar Library for Figma and Sketch
UIBundleThousands of Free Design Resources like UI Kits, Mockups, Illustrations, Icons, Fonts, 3D assets, Templates and more.
openby.designCustom crafted free UI design resources, for personal and commercial projects. No attribution is required.
Design StripeCreate beautiful illustrations, no design skills needed.
HOLA SVG!An SVG playground to share SVG stuff.
symu.coFree templates, UI kits, icon, PSD
Mesh GradientGenerate & download beautiful mesh gradients.
CSS Shadow GradientsGenerate CSS Gradients For Shadows.
CreaticaGenerate unique beautiful and unique Backgrounds and patterns.
Boring AvatarsSVG random, cutely avatars collections
Html to DesignConvert any website into fully editable Figma designs
fffuelcollection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Fonts

Websites that offer free fonts as well as font-based tools

Website                           Description
Google FontsLibrary of around 1000 free licensed font families
DaFontArchive of freely downloadable fonts
Use & ModifyPersonal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free FontsI think the name speaks for itself :smirk:
Font SquirrelFont Squirrel scours the internet for high quality, legitimately free fonts
Font FabricA digital type foundry crafting retail fonts and custom typography for various brands
Just Free FontsA hand-curated collection of freeware, open-source, and public domain fonts intended for commercial use
TiffA type diff tool that visually contrasts the differences between two fonts
TypeKit PracticeLearn about typography practices
FontjoyGenerate font pairing in one click
Golden RatioGolden Ratio Typography Calculator
FontGetHas a variety of fonts available to download and sorted neatly with tags
FontPairHelps you pair Google Fonts together
Font SpaceA designer-centered free font website that has quick customizable previews
Abstract FontsFonts free for personal and commercial use
Free TypographyA list of high quality fonts
Leon SansA geometric sans-serif typeface made with code
LexendA variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple PlatformsGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWinSan Francisco Fonts for Windows 10 and non-Apple Platform
Font FlipperPreview 800+ Google Fonts on top of your own designs, without having to download the fonts
Fonts ArenaFree curated fonts
BefontsHigh quality fonts for free
Arabic fontsArabic fonts for free
FontDropSimple and easy way to view the contents of font files
Open FoundryFREE platform for curated open-source typefaces
GlyphterUpload your own SVGS and turn them into font files. Useful if you want a smaller library loaded
Google Webfonts HelperA Hassle-Free Way to Self-Host Google Fonts
Rough Font AwesomeWhen RoughJS meets Font Awesome
FFontsStylish fonts for free
Malayalam FontsMalayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC)
Dev FontsFind and use the coding fonts for free
Font MFree font you can download for material coding and design
W FontsDownload Free fonts
Modern fluid typography editorFluid typography is a modern way of approaching responsive typography.
UrbanFontsA collection of over 8000 free fonts and dingbats
TypespirationInspirational font combinations and color palettes
FontsourceSelf-host Open Source fonts in neatly bundled NPM packages.
FontBoltDiscover and generate your favorite fonts from pop culture.
FontshareFontshare is a free fonts service from the Indian Type Foundry (ITF), making quality fonts accessible to all.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Colors

Websites and resources that help with choices related to colors

Website                           Description
ColorlabCreate color palette, gradients, color scales, check contrast all in one place.
Color Brewer 2The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest.
HuetoneA tool to create accessible color systems.
Colormind.ioColor palette generator
ColorCurves.appColor palette generator that uses curves to generate color palettes
ColorGradientA free tool to create simple and complex CSS Gradients visually
CoolorsCreate the perfect palette or get inspired by thousands of beautiful color schemes
UI ColorsTailwind CSS color palette generator
HTML Color CodesGet HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names
Colors & FontsA curated library of colors, fonts and resources
Palette ListPick 2 colors you like and the tool generates thousands of palettes for you.
Google Material Color ToolOfficial Google Material Color Palette Tool
Material PaletteFree to pick palettes, icons and colors for Material Design
ColorSpaceGenerate nice color palettes from one color
FlatUIColorsBeautiful set of color palettes in various flavors
Adobe ColorCreate color palettes, extract gradients from images, etc.
ColorsinspoAll-in-one resource for finding everything about colors
ColorsWallPlace to store your color palettes and generate palette in one click
HappyhuesHappy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child
Adobe TrendsDiscover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color HuntA free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient HuntA free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web GradientsA free website to find good CSS gradients
ColorBoxA free website to produce color set
CSS gradientA free website to make custom gradient and some examples of gradient
gradientaA pure css and jpg gradients
UI GradientsUI gradients color generator
Palette GeneratorGenerate new color palette with every spacebar press
Material Palettes1000+ Material Design palettes
GrabientGradient Selector
ShadeSwashQuickly generate shades of any color
BrandColorsThe biggest collection of official brand color codes
BRAND PALETTESLogo Color Codes and Palettes
Material Design Palette GeneratorGenerate theme and color palette Material Design-like
ColorateColor scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work.
0to255A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.
Color BlenderA tool that shows the midpoint colors between two colors
Gradient ButtonsReady to use copy/paste gradient buttons
KhromaKhroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
whocanuseA tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
ColorableColor combination contrast tester
Color Hex PickerTool to get hex code along with name of the color.
SaruwakakunThe stunning color scheme for website & App Designs with previews
PalettonPaletton.com is a designer color tool designed for creating color combinations that work together well.
ColorzillaA powerful online Photoshop-like CSS gradient editor
CSS Gradient EditorYou may only need this tool for creating CSS gradient backgrounds and patterns.
Image Color PickerImage color picker and palette generator
CombineCOLORSColor mixing tool
Color LoversIt will show the color schemes which are popular in the outside world.
HTML CSS ColorFree online Color (USA) or Colour (British) tools: information, gradient generator, color wheels etc.
HEX Color CodesIt gets HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names.
CoolHue 2.0A free tool that shows different gradient examples in CSS and PNG format
Colors.lolInteresting color palettes generated by a Twitter bot, there are hex codes and descriptive names for each color.
colors.dopelySuper-fast and simple color palette generator, palettes can be saved and shared in seconds.
UIColor PickerA collection of UI Colors with hex codes available to be copied in just one click.
Color HexColor-hex gives information about colors including color models (RGB,HSL,HSV and CMYK) and generates a simple css code for the selected color.
FarbVeloA random color palette generator
Veranda ColorBrowse color palettes made by other designers, generate and submit your own
DuoDuo is a collection of colour combinations that I’ve curated from personal projects or that I’ve come across on the web.
Lospec Palette ListThe Lospec Palette List is a database of palettes for pixel art.
Palettte AppBuild smooth color schemes that flow from one color to another.
EggradientsGradient Background Colors with eggs.
GradientosFind and test gradients easily.
EncycolorpediaWebsite for referencing web colors. Color knowledge, Web colors, Hex color codes.
CromaPowerful color tools including an eyedropper, color picker, and palette generator.
Color DesignerA gradient generetor from one color.
DuotoneFind beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and applying a duotone effect in seconds.
coolbackgrounds generatorExplore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.
Color Shades GeneratorWe can quickly generate color shades of our favorite colors or any colors, to create templates or css components with multiple color shades and more useful tools available on same site
HuemintHuemint uses machine learning to create unique color schemes for your brand, website or graphic
InclusiveColors palette creatorCreate custom accessible Tailwind-style color palettes, where you can modify HSL curves across whole swatches, check WCAG/APCA contrast, then export to Tailwind/CSS/Figma/Adobe
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Icons

Resources for Icons including png, svg and more

Website                           Description
Circum IconsConsistant open source icons as SVG for React, Vue and Svelte
UXWingWell Optimized, Free icons for commercial use
Shapedfonts Iconclub8000+ free icons
Feather IconsBeautiful, customizable open source icons
Tabler Icons3500+ highly customizable open source SVG icons with React, Preact, Vue, Svelte and SolidJS support
XiconsSVG Vue/React components integrated from fluentui-system-icons, ionicons, etc. (Vue3, Vue2, React, SVG).
IconoirFree library of 900+ open source icons
Simple Icons1307 Free SVG icons for popular brands
Linear Icons1000+ Ultra crisp vector icons
Icons8Free icons, photos, vectors and tools
Flat IconThe largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats
The Noun ProjectOver 2 Million curated icons, created by a global community
IconscoutFree Download Icons illustrations stock photos at one place
IconSear.chSearch engine with over 50,000 SVG icons indexed
Nucleo AppNucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)
Icon-icons.comFree Icons PNG, ICO, ICNS and Vector file SVG
Bootstrap IconsFree Icons built for Bootstrap but they'll work in any project
Remix IconSimply Delightful Icon System
IconmonstrDiscover 4496+ free icons in 313 collections
Vivid.jsReady to use Free and Open Source SVG Icons Pack JavaScript Library.
IconfinderFree and premium vector icons in SVG, PNG, CSH and AI format
Lordicon50 free animated interactive icons
UseAnimationsFree Animated Icons in SVG and Json Format(for lottie)
css.gg700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
IconBros7843+ free icons grouped in 182 collections
Material Design IconsAn icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
HeroiconsFree, open source icons from the creators of Tailwind CSS.
ZondiconsA set of free premium SVG icons for you to use on your digital products.
Endless IconsA website offering a number of free icons. Icons are tagged and also compressed into kits.
IcomoonBrowse 5500+ Free Icons. Add any set you wish to easily browse and search its icons.
Eva IconsEva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.
CryptoiconsA set of 430 crypto and fiat currency icons. Completely free.
IkonateFully customizable & accessible vector icons
appiconQuickly generate app icons in different sizes for your IOS, macOS and Android projects
LineIcons2000+ Essential Line Icons for Designers and Developers
EvericonsEvericons is a big pack of over 460 free icons designed by Aleksey Popov.
SVG RepoDownload free SVG Vectors for commercial use.
ConvertioConvert PNG files to SVG online & free. (One of the services provided by it.)
CSS ICONIcon set made with pure css code, no dependencies, "grab and go" icons
Unified iconsThousands of icons, one unified framework. One library, over 40,000 vector icons.
System UIcons220+ icons in a growing collection.
IconParkTransform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Radix IconsA crisp set of 15×15 icons designed by the Modulz team. All icons available as individual react component,SVG and more.
EOS IconsA pixel-perfect, open source iconic font available as ligature and SVG.
IoniconsBeautifully crafted open source icons for use in web, iOS, Android, and desktop apps.
Phosphor IconsPhosphor is a flexible icon family for interfaces, diagrams, presentations
Teeny IconsTeenyIcons is a set icons in SVG format easy to use in html
LucideLucide is an open-source icon library, a fork of Feather Icons.
IconesIcon Explorer with Instant searching, powered by Iconify.
Shitty IconsCollection of Free icons.
IconspediaIconspedia is a website that contains a large collection of high quality free icons.
iconhubJust practical stunning icons for everyone
3DICONSBeautifully crafted open source 3D icons
IconsDbFree Custom Icons
Emoji GuideThe collection of 3300 emojis with their HTML codes for easy use.
Unicorn Icons100+ customizable playful animated icons. Available in JSON and SVG format.
Sargam IconsA collection of 275+ open-source icons available for Figma, SVGs, and React.
Icon buddyA collection of 100K+ open-source SVG icons, fully customizable for designers and developers.
Round IconsThe world's biggest premium and free icon packs library of flat icons, line icons, filled outline, isometric and solid styles.
VectopusTop curated collective resources for elite designers.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Logos

Resources for Logos

Website                           Description
LogoSear.chSearch engine with over 200,000 SVG logos indexed
SVGPorn1000+ high-quality SVG logos
Payment System LogosLogos for payment systems available in png and svg
Browser LogosHigh resolution web browser logos
VectorLogoZoneConsistently formatted SVG logos
World Vector LogoDownload vector logos of brands you love
Logo MakerCreate custom logos
Free Logo MakerFast, All-in-One Logo Generator
LOGOwineBrand Logos Free Download in SVG Vector & PNG File Format
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Favicons

Resources for Favicons

Website                           Description
Favicon.ioGenerate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
FavicomaticGenerate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device
Favicon GeneratorGenerate favicon ico files for your website
RealFaviconGeneratorGenerate icons for all platforms (Windows, iOS, Android)
FontIconGenerate favicons and images from Font Awesome icons
Favicon.ccDraw a favicon online and browse through a library of favicons made by other users
Maskable.app EditorGenerate maskable PWA icons based on your existing icon
Favicon GeneratorGenerate website's favicon assets. SVG, maskable, image minified supported. Pure frontend. No privacy risk. Fast.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Icon Fonts

Resources for Icon Fonts

Website                           Description
Font AwesomeThe web's most popular icon set and toolkit
Line AwesomeSwap in replacement of Font Awesome with modern line icons
Material IconsMaterial design icon library
IonIconsBeautifully crafted open source icons from Ionic team
Zurb Foundation IconsCustomizable Foundation icons
Fontisto IconsFontisto the iconic font and css toolkit · 616+ free icons
BoxiconsBoxicons is a free collection of carefully crafted open source icons
Icofont2100+ free icons to spice up your creative designs
Material PaletteFree to pick palettes, icons and colors for Material Design
Material Design Iconic FontMaterial design icon font
Vscode CodiconsThe icon font from Visual Studio Code
DeviconDevicon is a set of icons representing programming languages, designing & development tools
PaymentFontA sleek web font for payment operators and methods. Featuring 116 icons
Weather IconsWeather Icons is the only icon font with 222 weather themed icons
Stroke 7202 thin stroke icons inspired by iOS 7
Jam Icons890+ handcrafted icons to make your web app awesome
Fontello200+ web icons where you can customize the names or codes of icons.
LineaLinea: Featuring 750+ Free Icons
UniconsA set of 1100+ Free line style icons available as web font, SVG icons, and as components for JS frameworks like React, Vue and React Native.
Mobirise IconsA free, open source set of 150 elegant, pixel-perfect linear icons, available as web icon font and SVG icons.
Hero IconsFree Open Source Svg Icon Library
React IconsAn Open Source and free Svg Icon Library, it is a collection of your favorite icon libraries like Font Awesome and Material Icons to provide you with a wide range of SVG icons to choose from.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Stock Photos

Websites that offer free stock photos of all kinds for your websites and apps

Website                           Description
PexelsFree stock photos shared by talented creators
UnsplashThe internet’s source of freely usable images
PixabayOver 1.7 million+ high-quality stock images and videos
MagdeleineGallery & free high-resolution photo everyday
PicspreeRoyalty free images, stock photos, illustrations, and vectors
BurstFree stock photos collections
GratisographyFree collection of free high-resolution pictures
Life of PixFree high-resolution photography
Stock SnapHundreds of high quality photos added weekly
MorguefileOver 350,000 free stock photos for commercial use
Kaboom PicsStock photography and color palettes. Good for product images
New Old StockStock vintage photos
Pic JumboGood collections of different types of photos
Public Domain PicturesPublic domain images of all types
Find A PhotoSearches multiple stock photo websites
StockvaultCategorized stock photos
PlaceholderA free image placeholder service for the web. You can specify image size and format
Realistic ShotsFree high-resolution stock photos
Negative SpaceHigh-Resolution Free Stock Photos
SkitterPhotoFree high-resolution photography
PicoGraphyGorgeous, High-Resolution, Free Photos
Wunder StockStunningly amazing free photos
PxHereFree Images & Free stock photos - PxHere
PiqselsRoyalty Free Stock Photos
FoodiesFeedFood photo stock
NappyA website offering Beautiful, high-res photos of black and brown people.
Generated PhotosUnique AI Generated model photos
ReshotUniquely free photos. Handpicked, non-stocky images.
Free ImagesFind and download free stock photos - all free for personal and commercial use
Lorem PicsumAn easy to use API to get beautiful placeholder images. Size and other parameters can be specified.
scienceimageAn image library specializing in science and nature images
Integration & Application Network Image LibraryFree images to provide scientists, resource managers, government agencies, community groups and graphics professionals with a resource for enhancing science communication.
SaxifragaFree nature images
Creative CommonsSearch for free images to reuse.
AllTheFreeStocka curated list of free stock images, audio and videos.
Lorem.space - Placeholder image generatorAPI for placeholder images but useful!
OpenverseOpenverse is a search engine for openly-licensed media
ISO RepublicGet Thousands of Free High-Resolution Stock CC0 Photos
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Stock Videos

Websites that offer free stock videos of all kinds for your websites and apps

Website                           Description
PexelsLargest library of free to use videos, donated by the community
PixabayLarge library of free to use videos, donated by the community similar to Pexels
Coverr.coBeautiful free stock video footage
VideezyFree HD stock footage & 4K videos
Mix KitStock video clips & music
Life Of VidsFree video clips and loops
VidevoFree and premium stock videos
LoopvidzFree To Use Cinema graphs Created With VIMAGE App
SplitShireBeautiful & exclusive free stock videos & photos
Free-Stock-VideoFree Footage Stock Videos
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Stock Music & Sound Effects

Websites that offer free stock music and/or sound effects

Website                           Description
YouTube Studio Audio LibraryRoyalty-free audio library for downloadable music and sound effects. Cleared for YouTube monetization.
Free Stock MusicRoyalty free stock music for YouTube videos, podcasts, etc
BensoundDownload Royalty Free Music for free and use it in your project
MixkitFree music for your projects
FreesoundFree stock music and sounds
Free Music ArchiveCollaborative database of creative-commons licensed sound for musicians and sound lovers
MusopenAn online copyright free classical music library
PixabayFree music downloads for your project like Youtube videos, Music, Vlog, Film, Podcast etc.
UnminusFree Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

Website                           Description
VecteezyFind and download free vector art
FreepikFree vectors, stock photos, PSD and icons
Free VectorsCommunity of vector lovers who share free vector graphics
PNGTreepng, backgrounds, templates, text effects
Vector4FreeFree vector graphics
FreebleVectors, patterns, mockups and more
LukaszadamFree Vector artworks
IlllustrationsBeautiful 100 Illustrations - png, svg
ClipartChoose great clipart, png, coloring pages, drawings and more for your projects from the free collection!
Growwwkit illustrationsA set of 8 simple, black & white, stylish illustrations
trianglify.ioGenerate low-poly backgrounds, textures, and vectors
blobGenerate Blob shapes for Web and Flutter apps
HiClipartA community for designers to share & download transparent background PNG cliparts
Stories by FreepikA collection of free and customizable illustrations for projects
Black IllustrationsBeautiful illustrations of black people (free and premium)
DelesignA collection of free illustrations and more
Custom Shape DividersFree tool to make it easier for designers and developers to export a beautiful SVG shape divider
Servier Medical Art3000 free medical images to illustrate your publications and PowerPoint presentations
ClkerFree clip art you can use for anything you like
SVG waveA free, & customizable gradient 🌈 SVG wave generator for UI designs .
BGjarFree svg background generator for your websites, blogs and app.
Heritage LibraryVintage Illustrations (vector and png)
ROBOHASHGenerate unique images from any text
TabbiedCreate and customize minimally generated patterns/artwork to use for background images, print and other projects.
HaikeiAn awesome multishape web app.
VectorAwesome website for all kinds of Moroccan vectors.
HeazyUnique vector assets within seconds.
MossaikFree SVG generator with different tools, waves, tiles, blobs, and more.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Product & Image Mockups

Create mockups of devices and other products

Website                           Description
MockCityBulk generate mockups from PSD templates by automatically placing images in SmartObjects. The visual editor allows you to change SmartObject parameters and see an updated mockup preview in realtime.
Smart MockupsCreate stunning product mockups (free & premium)
Media Modifierbeautiful design mockups service for your products (free & premium)
Shot SnapCreate beautiful device mockup images for your app or website design
ScreelyInstantly turn your screenshot into a mockup
Screenshot.rocksCreate beautiful browser & mobile mockups in seconds
Screen PeakCreate a mockup from a URL
Mockup WorldThe biggest source of free photo-realistic Mockups online
Collab ShotReal-time screen grabs and image sharing
Facebook DevicesImages and Sketch files of popular devices
Threed.ioGenerate 3D mockups right in your browser.
Mockuphone100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV
Device ShotsCreate high-resolution device mockups for social media, for free
Clean MockCreate stunning mockups using latest device frames like iPhone X & custom backgrounds that make your mobile or website design standout, right from your browser quickly & for free.
Mock.VideoInstantly create mockups by adding a device frame to your videos.
MockupBroCreate product mockups with online mockup generator! Just choose a mockup, upload your design and download your image without a watermark.
AnimockupCreate animated mockups in the browser 🔥.
PikaInstantly create browser mockups and beautiful images for marketing, blog post and more
LunacyCreate mockups from scratch for free
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

HTML & CSS Templates

Websites that offer free beautiful website templates and themes of all types

Website                           Description
HTML5UpVery modern, unique responsive HTML5/CSS3 themes
TemplatemoMinimal, resume, gallery themes and more
FreeHTML5Free & premium HTML5 and Bootstrap themes
StyleShoutBrilliantly crafted free website templates
Start BootstrapBootstrap starter themes
HTML5xCSS3Collection of wonderful templates in different categories
ThemeWagonCollection of HTML5 Bootstrap templates from different categories
ColorlibAlmost any category of theme you can think of
Free CSSHuge collection of free templates
HubspotTemplates, infographics, banners and much more
MobiriseGreat looking HTML5/CSS3 templates
BootswatchFree themes for Bootstrap
OnepageloveOne-page websites, templates and resources
Themes For AppFree Bootstrap themes and landing pages
BootstrapTastePremium & Free Bootstrap Templates
BootstrapMadeElegant, clean and beautiful free templates using Bootstrap.
W3LayoutsW3Layouts: 3784+ Free Website Templates for 2020
TooplateTooplate: Free HTML Templates for everyone!
CruipFully coded HTML templates to help you easily build your startup landing page without hassles.
UIdeckFree Landing Page Templates and Bootstrap Themes
SplawrFree web templates to kickstart your idea!
W3css_templatesSome responsive W3.CSS website templates for you to use.
All-Free-DownloadDownload free-website-templates
mashup-templateHTML5/CSS3 Free Templates
Sneat Bootstrap 5 HTML Admin TemplateOpen-source & Easy to us Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout.
HTMLrevFree beautiful HTML5 templates and landing pages
Horizon UITrendiest open source Admin Template for React
KeenThemesFree and Pro Html/Css3, Bootstrap5, Vue, React, Laravel templates
ScrewFastOpen-source Astro website template with sleek, customizable TailwindCSS components
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

CSS Frameworks

CSS/UI frameworks to help build great looking websites and applications

Website                           Description
Tailwind CSSLow level, utility-first framework
BootstrapPopular UI framework with tons of components that use both CSS and JS
MaterializeA modern responsive front-end framework based on Material Design
Material Design LiteLight framework based on Material Design. No JS dependency
BulmaModern CSS framework with no JS
SkeletonExtremely light framework for basic UI elements
Uniform CSSFully configurable utility generator and CSS framework built entirely in Sass
Semantic UIEmpowers designers and developers by creating a shared vocabulary for UI
Fomantic UIA community fork of Semantic-UI
FoundationMobile first framework with clean markup
Pure CSSA set of small, responsive CSS modules
UIKitLightweight and modular front-end framework
SusyLightweight, grid-layout engine for Sass
Milligram.ioMinimalist CSS framework
Vanilla FrameworkSimple, extensible CSS framework written in Sass
Spectre CSSLightweight, modern CSS framework
Picnic CSSLightweight and beautiful library
WingA beautiful CSS framework designed for minimalists
ChotaA micro (~3kb) CSS framework
Blueprint CSSA lightweight layout library for building great responsive mobile first UIs that work everywhere
W3.CSSA modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library
98.cssA design system for building faithful recreations of old UIs
NES CSSNES-style CSS Framework
Shoelace.cssLightweight, forward-thinking CSS library built with future CSS syntax
MVP.cssA minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done
Blaze.cssOpen source modular CSS toolkit providing great structure for building websites quickly
Turret CSSTurret CSS is a styles framework for development of responsive websites.
CutestrapA strong, independent CSS Framework.
XP.cssXP.css is an extension of 98.css. A CSS library for building interfaces that look like old UIs.
Framework7Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel.
Hint.cssA pure CSS tooltip library for your lovely websites.
imagehover.ioPure CSS Image Hover Effect Library
mini.cssA minimal, responsive, style-agnostic CSS framework
TachyonsCreate fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
Material BootstrapMaterial Design with Bootstrap
IvoryA modern CSS framework for developing powerful web interfaces faster and easier
Halfmoon UIA responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages.
Metro 4Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript.
css-doodleA web component for drawing patterns with CSS
latex.cssMake your website look like a LaTeX document
Paper CSSFront-end printing solution
Windi CSSNext generation compiler for Tailwind CSS
Cirrus CSSA component and utility centric SCSS framework designed for rapid prototyping.
GutenbergModern framework to print the web correctly. 
litWorld's smallest responsive fire css framework (395 bytes). 
ArwesArwes is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. 
BojlerBojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients. 
TacitPrimitive CSS Framework for dummies, without classes. 
Terminal CSSA modern and minimal CSS framework for terminal lovers. 
SakuraA minimal classless css framework / theme. 
PSonePS1 style CSS Framework, inspired by NES.css. 
MarxMarx is the classless CSS reset to be used in any projects (namely small ones). 
TufteStyle your webpage like Edward Tufte’s handouts. 
AxentixAxentix is an open source Framework based on CSS Grid using HTML, CSS and JS.
Raster Simple Grid SystemMinimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS.
flowriftFlowrift is a library made of beautifully designed Tailwind CSS UI blocks.
twindThe smallest, fastest, most feature complete tailwind-in-js solution in existence
Pico.cssElegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
clay.cssExtensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components.
BeerCSSBuild Material Design interfaces in record time, without stress for devs 🍻. The first CSS framework that implements Material Design 3.
UnoCSSUnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets. 
Neptune CSSNeptune CSS is a lightweight CSS framework. Use it to develop your websites faster. 
StyleXStyleX is a simple, easy-to-use JavaScript syntax and compiler for styling web apps. 
OrbitOrbit is the first CSS framework for creating simple or complex radial interfaces. 
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

CSS Methodologies

CSS methodologies to help write modular, reusable and scalable code

Website                           Description
OOCSSOOCSS concepts help us write components that are flexible, modular and interchangeable.
Atomic CSSAtomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.
BEMBlock Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.
SMACSSSMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.
CUBECUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

CSS Animations

CSS animations to build awesome animations for websites and applications

Website                           Description
Animate.cssJust-add-water CSS animations
Bounce.jsBounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations
Anime.jsAnime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects
Magic AnimationsAnimations has been one of the most impressive animation libraries available
ZdogRound, flat, designer-friendly pseudo-3D engine for canvas & SVG
CSShakeCSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page
Hover.cssHover.css is a CSS animation library designed for use with buttons and other UI elements in your website
AniJSAniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure
AnimistaCSS Animations On Demand
Tachyons-animateTachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need
Sequence.jsSequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications
InfiniteThese animations, like rotations and pulses, that are specifically designed to run and repeat forever
OBNOXIOUS.CSSAnimations for the strong of heart, and weak of mind
MOTION UIA Sass library for creating flexible CSS transitions and animations
Keyframes.appA graphical user interface for generating custom CSS keyframe animations
thoughtbotCSS Transitions and Transformations for Beginners
SVG ArtistaA useful tool to animate stroke and fill properties in SVG images with plain CSS code
AnimXYZAnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS
WhirlCSS loading animations with minimal effort!
HamburgersHamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.
CSS Loaders & SpinnersThis is a library having a collection of different types of CSS loaders, spinners
Motion OneA new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
pocolocoGenerate dynamic backgrounds for your website
AniXSuper easy and lightweight css animation library.
AOSAnimate On Scroll Library.
AnimatopyJust-add-water CSS animations snippets
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Javascript Animation Libraries

javascript animations libraries to build awesome animations for websites and applications

Website                           Description
GreensockA JavaScript library for building high-performance animations that work in every major browser
Velocity.jsVelocity is a lightweight animation engine with the same API as jQuery's $.animate()
lax.jsSimple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll!
Rellax.jsA buttery smooth, super lightweight, vanilla javascript parallax library
three.jsAn easy to use, lightweight, 3D library with a default WebGL renderer.
AtroposAtropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.
wow.jsReveal Animations When You Scroll.
chocolat.jsFree lightbox plugin.
Animate On ScrollAnimate on scroll library to reveal animations when You scroll.
Tilt.jsA tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.
RoughnotationRough Notation is a small JavaScript library to create and animate annotations on a web page
tsParticlesA lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js
Particles.jsA lightweight JavaScript library for creating particles
mo.jsThe motion graphics toolbelt for the web
Lightbox2A small JS library to overlay images on top of the current page.
SlickFully responsive carousel
barba.jsCreate fluid and smooth transitions between your website’s pages.
Locomotive ScrollA simple scroll library that provides detection of elements in viewport & smooth scrolling with parallax.
Owl carouselFree responsive jQuery carousel
SwiperjsFree, Open Source, Modern Slider without jQuery. Available for Vanilla JS and all modern frameworks like React, Vue, Angular etc.
SplideFree, pure JS library for carousels and sliders
Simple ParallaxThe easiest way to get a parallax effect with javascript
KUTE.jsKUTE.js is a JavaScript animation engine for modern browsers.
Granim.jsCreate fluid and interactive gradient animations with this small javascript library.
PopmotionSimple animation libraries for delightful user interfaces.
VivusVivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
Typed.jsA JavaScript Typing Animation Library.
Progress Bar.jsResponsive and slick progress bars with animated SVG paths.
Midnight.jsMidnight.js lets you switch fixed headers on the fly
Tingle.jsTingle is a simple modal plugin written in pure JavaScript
Theatre.jsTheatre.js is a JavaScript animation library with a GUI. It animates the DOM, WebGL, and any other JavaScript variable.
splidejsSplide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
nice-wavesBeautiful animated waves
Vanta.jsAnimated website backgrounds in a few lines of code.
Splitting.jsSplitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Javascript Chart Libraries

Libraries that help developers visualize data into charts

Website                           Description
ChartJSSimple yet flexible JavaScript charting for designers & developers
FrappeJSIncludes Green squares grid like in GitHub, and other charts to use.
G2PlotG2Plot is an interactive and responsive charting library based on the grammar of graphics.
Google ChartsGet the experience from Google to create similar charts that Google uses.
Data Driven Documents (D3)Bind complicated and massive data to interactive graphs.
ApexCharts.JsModern & Interactive Open-source Charts
ChartistSimple responsive charts
VizzuVizzu - a free, open-source Javascript library for building animated charts, data stories, and interactive explorers.
AntVAnt Design Charts, free JS Charts library for dynamic data with excellent documentation
NivoNivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Also comes with server side rendering ability and fully declarative charts.
EchartsAn Open Source JavaScript Visualization Library with declarative syntax for Rapid Construction of Web-based Visualization
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

UI Components & Kits

Not quite "frameworks", but tools for creating user interfaces with components or UI kits

Website                           Description
BitProvides a huge library of reuseable UI Components for React, Angular, Vue, React Native. Also can be used for sharing UI Components among other team members
UILangA minimal, UI-focused programming language for web designers
Medialoot CSS ComponentsCalendars, price grids and other UI components
Froala Design BlocksOver 170 responsive design blocks ready to be used in your web or mobile apps
FlowbiteOpen-source library of Tailwind CSS components
daisyUITailwind CSS Components
Mui TreasuryAn open-source project that provides a collection of ready-to-use components based on Material-UI.
Material Design For BootstrapOpen source toolkit for building material design with Bootstrap
PhotonkitDesktop UI library for Electron
Flat UIMinimal free user interface kit
ShardsA free and modern UI toolkit for web makers based on Bootstrap
ThemesbergFree and open-source website themes, templates, and UI kits based on Bootstrap and React
Creative TimAll types of UI libraries and kits including JS frameworks like React
Brumm Shadow MakerAn online tool to make css shadows
AdminLTEBest open source admin dashboard & control panel theme
SpinKitSimple CSS Spinners
Epic SpinnersCSS spinners collection with Vue.js integration.
Loading.ioOnline service provider for creating simple animations, spinners, progress bar and more
Moving LettersAnimated Text with JavaScript and anime.js
CSS LayoutA collection of popular web layouts and patterns in pure CSS
CSS Grid GeneratorAn open-source project that allow users to quickly create dynamic layout based on CSS Grid.
HTML Table GeneratorCreate semantic, responsive & accessible HTML tables to represent your tabular data. Set CSS properties, generate the code and copy & paste into your project.
CodyhouseKick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components
Tailwind Starter KitTailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source
TailwindtoolboxOpen source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project.
tailwindcomponentsA free repository for community components using TailwindCSS
sweetalertSweetAlert makes popup messages easy and pretty.
sweetalert2A beautiful, responsive, customizable, accessible replacement for javascript's popup boxes
tailblocksOpen source ready-to-use Tailwind CSS components.
FastAn interface system that can be used with modern Web Frameworks such as React, Vue and Angular.
LottieFiles Interactive animations in many formats like json,gif and mp4, libraries and plugins for Web & Mobile .
KuttyA set of accessible and reusable prebuilt Tailwind components that are commonly used in web applications.
Tailwind TemplatesA free collection of Tailwindcss Templates - tailwind components for rapid UI development.
StitchesAn HTML template generator using functional css.
Meraki UI ComponentsBeautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.
Daemonites Material Design For BootstrapDaemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4
StitchesCSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Headless UICompletely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Styled componentsBuild beautifully UI Components, for your applications & websites.
Figma Bootstrap 5 UI KitUI Kit comprising 300+ organized Bootstrap 5 components built with atomic design system & auto layout.
NotiflixJavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better
CoreUIBootstrap Admin Dashboard Template & UI Components Library
AgnosticUIAccessible React component primitives that also work with Vue 3, Svelte, and Angular
SVGRSVGR is an universal tool to transform a raw SVG into a ready-to-use React components. Available online, in CLI, Node.js, as a webpack/rollup/parcel plugin...
uiverseHundreds Open-Source UI elements, made with HTML & CSS. Anyone can contribute. Includes buttons, checkboxes, spinners, cards, inputs and more.
HyperUIFree open source Tailwind CSS components for marketing and ecommerce websites, as well as application UI.
Flowbite Admin DashboardFree and open-source admin dashboard template built with Tailwind CSS and Flowbite featuring 15 examples pages, charts, widgets, and dark mode.
Wicked BlocksA free collection of Tailwind blocks & components
Mamba UIMamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS.
KitwindFully responsive UI kits, built with Tailwind CSS.
DevUIFree and Open-Source UI Components for Maximum Productivity.
Tail-KitTail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 3.0.
Float UIFree and open-source UI components and website templates using Tailwind CSS
Konsta UIPixel perfect mobile UI components built with Tailwind CSS
React Native Gifted ChatA chat UI component that offers a ready-to-use chat interface with features like message bubbles, input toolbar, and more.
Wind UIExpertly made, responsive, accessible components in React and HTML ready to be used on your website or app.
SonnerAn opinionated toast component for React.
PinesPines 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.
Kuma UIWith Kuma UI's headless, zero-runtime UI components, build top-performing websites effortlessly, while enjoying the best developer experience. Say hello to the future of CSS-in-JS.
Preline UIPreline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Flyon UIThe Easiest Components Library For Tailwind CSS.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

React UI Libraries

UI and component libraries for the React JavaScript framework

Website                           Description
Material UIReact components for faster and easier web development, based on Material Design
Chakra UIBuild accessible React apps & websites with speed. Openchakra
React BootstrapBootstrap rebuilt for React. Include Bootstrap components right in your JavaScript
Semi DesignA modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps & SaaS products.
MantineReact components and hooks library with native dark theme support focused on usability, accessibility and developer experience.
NextUIBeautiful, fast and modern React UI library that allows you to create beatiful websites regardless of your design experience.
Arco DesignA comprehensive React UI components library based on the Arco Design system.
ui-playbookThe documented collection of UI components
ReactStrapAnother Bootstrap UI library for React
React AdminA frontend Framework for building admin applications. Supports API's out of the box
BlueprintJSReact-based UI toolkit for the web
React Semantic UIUI components based off of the Semantic UI framework
Shards ReactReact UI kit featuring a modern design system with dozens of custom components
React VirtualizedUI set for data. Includes tables, lists, sorting, etc.
React ToolboxMaterial design UI library for React
Elastic UIDistributes UI React components and static assets for use in building web layouts
React DesktopDesktop styled components in React. Includes MacOS and Windows based components
Theme UIBuild consistent, themeable React apps based on constraint-based design principles
Onsen ReactDistributes Components for hybrid mobile apps with React and Onsen UI
EvergreenDesign system for React
RebassReact primitive UI components built with styled system
Grommetmobile first UI component library
Landing Page TemplateOpen source landing page template for react
Elemental UIA UI Toolkit for React.js Websites and Apps
Ant DesignOpen source design React UI library.
BumbagBumbag is a friendly React UI Kit suitable for MVPs or large-scale applications.
PRIMEREACTThe ultimate collection of design-agnostic, flexible and accessible React UI Components
Primer ComponentsPrimer Components are React components which implement GitHub's Primer Design System
OrbitDesign system and React UI components for travel projects.
Base WebBase Web provides a robust suite of components out of the box
Backpack UIBackpack is the Lonely Planet toolset that we use to build front end apps.
ReavizData visualization library for React based on D3
React SuiteA suite of React components, sensible UI design, and a friendly development experience.
React SpringSpring-physics based animation library for React applications.
RechartsA composable charting library built on React components.
Vercel UIModern and minimalist React UI library
Framer MotionA React library to power production-ready animations.
React SpectrumA React implementation of Spectrum, Adobe’s design system.
@tsparticles/reactA lightweight React component for creating particles
particles-bgA React particles animation background component
TreactGallery of free and modern React templates and UI components developed using TailwindCSS as the front-end framework
OAH-Admina free React admin dashboard template based on Gatsby with oah-ui components and elements package.
Carolina Admin DashboardFree React admin template is powered by Material-UI components framework and features a clean and fresh design following Google's Material Design specifications.
TablerTabler is a free React admin dashboard template ideal for any kind of back-end web application.
Sha-el-designReact components for easier customization and smooth development flow.
React-WeUIReact-WeUI made from our love of React and WeChat's WeUI Design.
Supabase UIAn open-source UI component library inspired by Tailwind and AntDesign.
Ring UIA collection of JetBrains Web UI components.
React95Refreshed Windows 95 style UI components for your React app.
ReakitReakit is a lower level component library for building accessible high level UI libraries, design systems and applications with React.
ZentA collection of essential UI components written with React.
GestaltA set of React UI components that supports Pinterest’s design language.
xstyledA CSS-in-JS framework built for React with props based utilities like display, fontSize or rotate.
@use-gestureBread n butter utility for component-tied mouse/touch gestures in React.
React RainbowReact Rainbow is a collection of components that will reliably help you build your application in a snap.
React Use Smooth ScrollReact Provider Component to add a smooth scroll effect
Choc UIChoc UI is a set of accessible and reusable components that are commonly used in web applications.
ElementzA React Component library for buliding modern applications easily & quickly.
Radix UIUnstyled, accessible components for building high‑quality design systems and web apps in React
Materio MUI React NextJS Admin TemplateMost Powerful & Comprehensive Open-source MUI React NextJS Admin Dashboard Template built for developers.
Chakra TemplatesA growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project.
React Resizable PanelsReact components for resizable panel groups/layouts.
Carbon ReactExtensive library of React components for Websites and UI's. Based on the Carbon Design System from IBM
React AriaA library of React Hooks that provides accessible UI primitives for your design system.
shadcn/uiBeautifully designed components built with Radix UI and Tailwind CSS.
TremorReact components to build charts and dashboards with
Aceternity UICopy paste the most trending components and use them in your websites without having to worry about styling and animations.
Magic UIfree and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion.
Code UIBeautifully designied mobile responsive components built with HTML, CSS , JS and React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Edil OziComponent Library for Developers. Open Source components you can copy and paste to your apps.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Vue UI Libraries

UI and component libraries for the Vue JavaScript framework

Website                           Description
VuetifyMaterial design component framework
Bootstrap VueUse Bootstrap components with Vue
BuefyLightweight UI components based on Bulma
Semantic UI VueSemantic UI Vue is the Vue integration for Semantic UI
Arco Design VueA comprehensive Vue UI components library based on the Arco Design system.
VEUIVEUI is an enterprise UI component library, based on Vue.js.
GraceDesign System For Vue Applications.
QuasarHigh-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions
ElementDesktop UI library for Vue
Fish UIVue UI toolkit for the web
Keen UIVueUI library with a simple API, inspired by Google's Material Design
Materio Vuetify Vuejs Admin TemplateOpen-source & Easy to use Vuetify Vuejs Admin Template with Elegant Design & Unique Layout
Onsen VueDistributes Components for hybrid mobile apps with Vue and Onsen UI
VuejsexamplesA nice collection of useful vuejs UI components
InklineInkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications
VuesaxUnique and reusable UI components
AntdvUI library for Vue based on Ant Design
Shards VueA high-quality & free Vue UI kit featuring a modern design system with dozens of custom components
Prime VuePowerful yet simple to use, versatile, performant Vue UI Component Library to help you build stunning user interfaces.
Chakra UI VueChakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed.
View UIDozens of useful and beautiful Vue components made for people with all skill levels with extensive documentation.
@tsparticles/vue2A lightweight Vue 2.x component for creating particles
@tsparticles/vue3A lightweight Vue 3.x component for creating particles
TC ComponentsA library of high-quality ready to use components that will help you speed up your development workflow.
VantLightweight Mobile UI Components built on Vue.
Equal UIOpen-source Vue 3 components system for your next project based on TypeScript
Mint UIMobile UI elements for Vue.js
Cube UIA fantastic mobile ui lib implement by Vue.js
Muse UIBased on the Vue 2.0 elegant Material Design UI component library
AT-UIAT-UI is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js.
VuikitA consistent and responsive Vue UI library, based on the front-end framework UIkit.
Wave UIA Vue.js UI framework with only the bright side.
VueTailwindSet of Lightview and fully customizable Vue Components optimized for TailwindCSS.
OrugaOruga is a lightweight library of UI components for Vue.js without CSS framework dependency.
BalmUIBalmUI is a modular and customizable Material Design UI library for Vue.js.
Weex UIA rich interaction, lightweight, high performance UI library based on Weex.
VarletVarlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community.
Naive UIA Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.
VuesticFree and Open Source UI Library for Vue 3 🤘.
Vue Final ModalVue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
VuetensilsVuetensils is a lightweight component library for Vue 2.x that brings some of most common UI features, but only the bare minimum styles to avoid adding any extra bloat. You can work on the branding, and don't have to worry about the accessibility.
NuxtLabs UIFully styled and customizable components for Nuxt.
shadcn-vueVue port of shadcn-ui.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Angular UI Libraries

UI and component libraries for the Angular JavaScript framework

Website                           Description
Material AngularUI library for Angular based on Material design
NG BootstrapUI library for Angular based on the Bootstrap framework
PrimeNGPowerful UI component library for Angular
Onsen AngularHybrid mobile and PWA UI library for Angular and Onsen UI
NG LightningNative Angular components & directives for Lightning Design System
NG SemanticUI library for Angular based on Semantic UI
NebularCustomizable UI Kit, Auth & Security for Angular
Alyle UIMinimal components set for Angular
NGX BootstrapAnother UI library for Angular based on the Bootstrap framework
NG ZorroUI library for Angular based on Ant Design
Pagination for datatablesnpm library for pagination
Multi select dropdownFor multi select drop-dowm in forms
NG ParticlesA lightweight Angular component for creating particles
Covalent UIAngular UI Platform focused on solving common enterprise needs
ClarityCSS based Angular UI framework developed by VMware group
Taiga UITaiga UI is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons.
ngx-adminAdmin template based on Angular 10+ and Nebular
spartanCutting-edge tools powering Angular full-stack development.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Svelte UI Libraries

UI and component libraries for the Svelte JavaScript compiler

Website                           Description
Svelte Material UIUI library for Svelte based on Material Design
SvelteStrapUI library for Svelte based on the Bootstrap framework
Svelte Flat UIUI library for Svelte based on Flat Design
@tsparticles/svelteA lightweight Svelte component for creating particles
AttractionsA pretty cool UI kit for Svelte
SvelteitA minimalistic UI/UX component library for Svelte and Sapper projects
Carbon Components SvelteA component library that implements the Carbon Design System, an open source design system by IBM.
Radix SvelteThis is a port of Radix UI for Svelte.
shadcn-svelteshadcn-svelte is an unofficial community-led Svelte port of shadcn/ui.
SkeletonSkeleton is an open source UI toolkit built with Svelte + Tailwind that allows you to create reactive web interfaces using Svelte + Tailwind CSS.
Aceternity UI SvelteFree Incredible Animated Components.
Svelte UXCollection of Svelte components, actions, stores, and utilities to build highly interactive applications.
Flowbite-SvelteFlowbite-svelte is an open-source UI component library built with Svelte components, Tailwind CSS utility classes and based on the Flowbite design system
bits-uiThe headless components for Svelte
melt-uiA set of headless, accessible component builders for Svelte
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

React Native UI Libraries

UI and component libraries for the React Native Framework

Website                           Description
Magnus UIMagnus UI is the ultimate UI framework that helps you in building consistent user interfaces effortlessly in react native
React Native UI LibReact Native UI (RNUI) is a UI Toolset & Components Library for React Native from Wix
React Native PaperReact Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases
UI KittenUI Kitten is React Native framework for creating stunning cross-platform mobile applications. Design system based, brings your product from MVP to enterprise.
React Native ElementsCross Platform React Native UI Toolkit that provides an all-in-one UI kit for creating apps in react native.
NativeBaseEssential cross-platform UI components for React Native & Vue Native.
Shoutem UIShoutem UI toolkit enables you to build professionally looking React Native apps with ease.
tailwind-rnUse Tailwind CSS in React Native projects.
Ant Design Mobile RNAn Ant design based configurable Mobile UI component library based on React Native.
SnackUISnackUI is a UI Kit for React Native + react-native-web that's much faster rocket with an optimizing compiler.
MotiMoti is the universal animation package for React Native
TamaguiUniversal React design systems that optimize for native & web.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Design Systems & Style Guides

Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites

Website                           Description
Material DesignGoogle's Material Design
Ant DesignDesign system for enterprise-level products
Apple Design ResourcesGuides and templates for using Apple design and UI
PrimerDesign, build, and create with GitHub’s design system
Arco.designAn enterprise-level design system jointly launched by the Bytedance GIP UED team and the architecture front-end team.
Alta UIOracle's design system and toolkit
PulseDesign system, guides and React component library
BoltRobust Twig and web component powered UI components
Clarity Design SystemUX guidelines, HTML/CSS framework, and Angular components
AtlasKitAtlassian's official UI library, built according to the Atlassian Design Guidelines
Audi Design ResourcesAudi UI design system and toolkit
Carbon Design SystemsCarbon is IBM’s open-source design system for products and experiences
Yelp Style GuideYelp style guide, components and toolkit
CometScalable design system of visual language, components, and design assets
ETrade Design SystemGuides and toolkits that blend finance with simplicity and ease of use
Fundamental LibraryOpen source and community driven project for consistent user interfaces
Infor DesignGuidelines and resources to create meaningful experiences for Infor’s products
LexiconAn experience language for crafting beautiful UI
Mailchimp UI/UXStyle guide and components from Mailchimp
Marvel Style GuideSet of design principles and components
Microsoft Fluent UICollection of UX frameworks from Microsoft
Pluralsight Design SystemDesign guide with components for designing with Pluralsight
PolarisDesign system that creates great experiences for all of Shopify’s merchants
Mozilla ProtocolProtocol is a design system for Mozilla and Firefox websites
SendGrid Style GuideUI library for developing consistent UI/UX at SendGrid
VTEX StyleguideReusable patterns, components and assets related to product design in VTEX
RizzoStyle guide with UI components, JS components, widgets, etc
AtomizeUI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
StyleGuides.ioA directory of 500+ styleguides
Done Design SystemOpen source design system, guides & components
Skoda Brand SystemDesign guideline for developing applications under the Skoda brand
SpectrumAdobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
AsphaltGojek’s design language system. A collection of guidelines and components to create amazing user experiences.
Laws of UXA collection of the key maxims that designers must consider when building user interfaces.
Checklist DesignChecklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.
Humane By DesignA resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.
Pr1mer GuidelinesAn open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech
PatterflyPatternFly is an open source design system from Red Hat, Inc.
PatternsA resource to improve on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.
Design Principles For DevelopersA resource to improve Design principles and guidelines for developers.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Online Design Tools

All kinds of online tools for design, from photo editors to wireframing, and more

Website                           Description
FigmaOnline graphic design tool (Free & paid options)
PenpotPenpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG). For all and empowered by the community Open Source and selfhostable
VectrFree vector graphics software
TalerCreate social media banner designs in minutes from hundreds of customizable templates
CanvaCreate beautiful designs (Free & Paid)
Get WavesA free SVG wave generator to make unique SVG waves for web design
ClippyEasy CSS clip-path maker
Fancy Border RadiusEight values specifying border-radius in CSS ( border-radius generator )
Wireframe.ccWireframing tool (free & paid)
FotorPhoto editor and design maker
PixlrOnline photo editor
Animoto Video MakerMake videos online
RemoveBGRemove image backgrounds
Photo CreatorCreate your own photos instead of searching for stock
VismeCreate presentations, infographics and more
InfogramCreate infograms
ChartGoCreate charts and graphs online
Cartoon PhotoTurn photos into cartoons
WhimsicalWireframes, diagrams and more (4 free)
WhiteboardOnline drawing tool
OctopusSitemap builder
OnlineboardReal-time shareable whiteboard for brainstorming
CTA Button MakerCreate call to action buttons
BlobmakerBlobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
PersonasA playful avatar generator for the modern age
PhotopeaAn Online Photoshop editor
ExcalidrawVirtual whiteboard for sketching hand-drawn like diagrams
DiagramsDiagram software and Flowchart maker
Mermaidrenders Markdown-inspired text definitions to create and modify diagrams (like flowchart, sequence diagram, gantt, or user journey) dynamically. (FOSS)
MapInSecondsSimple way to visualize your data with a map
Grid MalvenA css grid cheatsheet to reference when creating a css grid
Flex MalvenA flexbox grid cheatsheet to reference when working with flexbox
Smart UpscalerUpscale images by 2-4x resolution (4 free)
GetAvataaarsFun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library
Big HeadsEasily generate avatars for your projects with Big Heads by Robert Broersma.
WebflowBreak the code barrier, Build better business websites, faster. Without coding.
TraceInstantly remove the background from your photos
Neumorphism.ioGenerate Soft-UI CSS shadow code
DB DesignerDesign your database for free online
Ui BakeryCreate full-fledged web apps visually
FauxTurn real code into faux code
RiveReal-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform.
UnscreenRemove Video Background 100% Automatically and Free
KodeshotConvert your source code into nice pictures for your articles, tweets, messages, posts...
WixCreate a Website You’re Proud Of
GTmetrixWebsite Speed and Performance Optimization
Yellow Lab ToolsOnline test to help speeding up heavy web pages
FramerIs prototyping tool for teams
Draw.ioFree online diagram editor tool
UXWing SVG EditorCreating and Edit SVG Online
CSS ArrowCreate and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.
LucidchartDiagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier
CarbonCreate and share beautiful images of your source code by typing or drop a file.
PixCleanerAccurate and hassle free background removal tool
Glass UIA modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.
GlassmorphismAn incredible online tool for generating quick glassmorphic UI in CSS code snippets.
TableConvertTable Convert Online is a web-based tool to converts Excel, URL, HTML, Markdown table and CSV to Markdown table, CSV/TSV, JSON, XML, YAML, insert SQL, HTML, Excel and LaTeX table.
Doodle IpsumThe lorem ipsum of illustrations. Just customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools.
FigenPost Cover & Background Generator Tool
WindframeA tool to rapidly prototype and build stunning websites using Tailwind CSS (Free & Premium)
SlickrA tool for designing cover image for your blog.
Shadow Palette GeneratorCreate a set of lush, realistic CSS shadows.
Ray.soOnline tool to create beautiful images of your code.
CodepngConvert your source code into awesome shareable images.
CSS Grid GeneratorA tool for creating CSS Grid Layouts
JSONTA simple and powerful online JSON formatting tool
JitterOnline tool to create motion graphics/design
VisilyTool that empowers non-designers to design web and mobile app mockups
okso.appThe drawing app with a nested "drawing-inside-the-drawing" structure
Calc GeneratorTool for easily creating precise Calc() CSS functions
Scrollbar.appSimple online editor for creating custom CSS scrollbars
GrapesJSOpen-source, multi-purpose, Web Builder Framework which combines different tools and features with the goal to help you (or users of your application) to build HTML templates without any knowledge of coding.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Downloadable Design Software

Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop

Website                           Description
GimpFree & open source image editor similar to Photoshop
Gravit DesignerFree full-featured vector graphic design app that works on ALL platforms
BlenderOpen source, free animation, 3D modeling, etc.
Raw TherapeeCross-platform raw image processing program
Be FunkyOnline design program
KritaSketching and painting program designed for digital artists
Pencil ProjectGUI prototyping software
InkscapePowerful free design tool
Adobe XDFree design tool from Adobe
Shapes.soIcons that can be used as code in your projects
LunacySketch for Windows
InVision StudioFree screen designing tool from InVision
DarktableFree & Open source photography workflow application and raw developer
Inpixio photo EditorFree Photo Editor: For windows only
ColorpickerOpen Source colors software: Retrieve, manipulate and store your colors easily!
Google Web DesignerCreate engaging, interactive HTML5-based designs and motion graphics that can run on any device.
Origami StudioInteractive interface design tool created by Facebook: For mac only
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Design Inspiration

Here are some websites to get inspiration for design and UI

Website                           Description
CSS Zen GardenDemonstrating the power of CSS, over 200 CSS-only interpretations of the same HTML file.
BehanceDesign projects featured by different creators
DribbbleDesign projects featured by different creators
LandingfolioLandingfolio features the best landing page inspiration, templates, resources and examples on the web.
FoxyappsDesign inspiration from the best mobile app designs
HttpsterShowcases websites made by people from all over the world
Land BookDisplays a large collection of websites to help find inspiration
Frontend MentorReal-world UI Challenges using HTML, CSS and Javascript
AwwwardsA website that rate and collects the best websites in the world in UI
CodropsA website that collects the best UI ideas and patterns and make tutorials of it
SaaS Landing PageDiscover the best landing page examples created by top-class SaaS companies
Saaspages.xyzA collection of the best landing pages with a focus on copywriting and design.
ScreenlaneScreenlane is a website and newsletter that features the latest web and mobile design inspiration.
lapa ninjaBest landing page inspiration
FreefrontendFree frontend design from css html and javascript. latest work some design part
WebframeDiscover and be inspired by beautiful webapp designs
Collect UIDaily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily.
Graphic BurgerA site offering a free and pain icons, mock-ups, Ui-Kits, text effect and backgrounds. This site's resource are a mix of free and paid resources. Icons is on a mix of PNG, SVG, EPS and Sketch Format. Some resources are confusing as there are sponsored content in the middle of the free sets.
Really Good EmailsA site offering users a ton of company e-mails from customer service to marketing.
Free Design ResourceA site offering fonts, mockups, templates graphics and ui kits.
Site InspiresiteInspire is a showcase of the finest web and interactive design.
Web Design InspirationA site for web design inspiration, updated daily.
NavNavResponsive navigation examples
CalltoideaCollection of different web Components for inspiration.
Mulzli SearchSearch engine for design inspiration
DeviantArtAccess to 370 million pieces of art for inspiration.
Design your wayCollection of different Web and Mobile Designs
SiteSeeA curated gallery of beautiful and modern websites.
UI GarageDaily handpicked UI inspiration & patterns.
ecomm.designeCommerce Website Design Gallery & Tech Inspiration.
Design NomineesA showcase of awarding and showcasing the best websites, apps and Games.
Design VaultA library of screenshots and patterns from real world digital products
CSS buttons84 Beautiful CSS buttons examples.
CSS box-shadow91 Beautiful CSS box-shadow examples.
Super DesignerDesign tools that give you super powers.
LandingsFind the best landing pages for your design inspiration based on your preference.
Page CollectivePage Collective is part of a network of design inspiration websites.
CuratedUnleash your creativity with out-of-this-world web design inspiration from across the web.
MaxibestofoneDaily feed of websites & fonts inspiration.
Bento GridsBento Grids is a curated collection of tiles-based layouts that were popularized by Apple with their summary slides.
Landing GalleryHome of the best landing page design inspiration.
a-fresh.websiteHand—picked website and component inspiration library.
bestwebdesigntoolsDiscover latest design tools, agencies and landing pages templates across web
App MotionExplore the best, hand-picked app motion design
Uiland DesignHome of the best mobile ui inspirations from top companies in the world
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Image Compression

Websites that allow you to compress large images

Website                           Description
TinyPNGSmart PNG and JPEG compression
OptimizillaOnline JPEG and PNG optimizer / compressor with settings and archive download
Compressor.ioJPEG, PNG, GIF, SVG Compression
Squoosh.appImage compression from Google Chrome Labs
BulkResizePhotosBulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
iLoveIMGThe fastest free web app for easy image modification
SvgOMGOnline SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
CompressJPEGCompress JPEG images with size even greater than 5MB
CompressNowJPEG, GIF, PNG Compression
Promo Image ResizerFree Image and Photo Resizer
Image OptimizerImage Optimizer Free With Quality Options
SVGminifyThis tool removes superfluous information, thereby reducing the size of your SVG files
JPEG OptimizerFree online tool for resizing and compressing digital photos and images for displaying on the web
Resizing.appResize Your Images Online
EZGifAnimated GIF maker and Image editor including Image optimization and supports WebP conversion
OnlinePngtoolsResize png for without losing transparent background.
VerexifRemove meta tags in image in order to reduce image size and increase privacy security
Vecta NanoUses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid)
WatermarklyPrivate, client-side compression of JPEG images. The app does not send images to a server for processing.
Jpeg.ioConvert any major image format into a highly optimized JPEG
CompressImage.ioCompress JPG and PNG images. No Limits. Bulk Conversion. Convert to WebP. Works Offline
JPEG Compressorfree image compressor tool and it support JPEG, PNG, SVG, JPG, WEBP and GIF.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Chrome Extensions

Useful Chrome extensions for Designers and Web-Developers.

Website                           Description
WhatFontThe easiest way to identify fonts on web pages.
WhatRunsDiscover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.
Web DeveloperAdds a toolbar button with various web developer tools.
Awesome Screenshot & Screen RecorderFull page screen capture and screen recorder - 2 in 1. Share screencast video instantly
daily.dev - News for Busy DevelopersGet programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers!
JSONViewValidate and view JSON documents.
JSON LiteBrowser extension for viewing JSON files.
Window ResizerResize the browser window to emulate various screen resolutions.
Responsive ViewerShow multiple screens once, Responsive design tester
BrowserStackInstantly test your webpage on any desktop or mobile browser.
VisBugOpen source web design debug tool built with JavaScript
Kontrast - WCAG Contrast CheckerQuickly check and adjust contrast in real-time in your browser to meet WCAG 2.1 requirements
PerfectPixelAdds a semi-transparent image overlay over the top of the developed HTML to easily perform pixel perfect comparison between them, useful for replicating UI designs.
PesticideInserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts.
Site PaletteA must-have tool for designers and frontend developers to grab colors for any website.
ColorZillaAdvanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
Lorem Ipsum Generator (Default Text)Provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can be customized.
JavaScript and CSS Code BeautifierBeautify CSS, JavaScript and JSON code when you open a .css/.js/.json file
Imageye - Image downloaderFind and download all images on a web page. With Imageye you can find, browse and download all the images present in a web page.
GoFullPage - Full Page Screen CaptureCapture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
StylebotChange the appearance of the web instantly.
ColorPick EyedropperA zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.
React Developer ToolReact debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.
WappalyzerWappalyzer is a technology profiler that shows you what websites are built with.
Fake FillerFake Filler a form filler that fills all inputs on a page with fake/dummy data.
Page Ruler ReduxA Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page.
Web EditorThe web editor is the tool that provides you with an enhanced way to inspect any website elements, alter their properties, insert contents, design, and visualize the way you want to see them.
CSSViewerA simple CSS property viewer.
Fonts NinjaIdentify fonts from any website, bookmark, try, and buy them.
LighthouseAn open-source, automated tool for improving the performance, quality, and correctness of your web apps.
Debug CSSAdds outline to all elements on the page to show the culprit element which is changing desired layout. Helps in debugging CSS of the page
UX CheckIdentify usability issues through a heuristic evaluation.
Angular Developer ToolAngular DevTools allows you to understand the structure of your application and preview the state of the directive and the component instances.
Redux Developer ToolRedux DevTools provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.
Hackertab.devHackertab helps developers stay up-to-date with the latest dev news and resources in one tab.
JSON FormatterFormats and colors JSON content for better readability. It can also collapse and expand nested structures.
SEO MinionA SEO tool that includes features like on-page SEO analysis, broken link checking, and SERP preview and more.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Firefox Extensions

Useful Firefox extensions for Designers and Web-Developers.

Website                           Description
WhatFontIdentify fonts on web pages
WhatRunsDiscover technologies used on websites
Web DeveloperToolbar for web development tasks
Awesome Screenshot & Screen RecorderCapture and annotate screenshots
daily.dev - News for Busy DevelopersDeveloper news and resources
JSONViewFormat and syntax highlight JSON
Window ResizerResize browser window to predefined dimensions
Responsive ViewerTest responsive design of websites
BrowserStackInstantly preview websites on different devices
VisBugWeb design debugging tool
Kontrast - WCAG Contrast CheckerCheck contrast levels for accessibility
PerfectPixelOverlay an image over a web page to compare
PesticideOutline elements on web page for easy visualization
Site PaletteExtract color palette from website
ColorZillaAdvanced color picker and eyedropper
Lorem Ipsum Generator (Default Text)Generate lorem ipsum text
JavaScript and CSS Code BeautifierBeautify and minify JavaScript and CSS code
Imageye - Image downloaderDownload images from web pages
Fireshot - Full Page Screen CaptureCapture full web pages
StylebotCustomize the appearance of web pages
ColorPick EyedropperSimple color picker and eyedropper
React Developer ToolInspect React component hierarchy
WappalyzerIdentify technologies used on websites
Fake FillerFill out web forms with dummy data
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

AI Graphic Design Tools

AI tools that offer free service to generate design

Website                           Description
Leonardo.AiLeonardo AI is an AI-powered design tool that can help you create designs based on reference images.
Galileo AIGalileo AI is a UI generation platform for easy and fast design ideation. It allows users to generate interface designs from text.
ImgGen.AiImgGen AI is a free AI-powered image generator and enhancement tool.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>

Others

Uncategorized Stuff

Website                           Description
FigpeekFigpeek is a new Figma and GitHub thumbnail generator.
Image ExtractorOnline tool for extracting all images and SVGs of a website, all you is just to drop the URL
VertopalFree online platform for converting computer files to a variety of file formats
everysize.kibalabs.comCheck your awesome responsive webpage looks great in every size
Devhints.ioThis is a modest collection of cheatsheets on Internet
The Web ToolboxA collection of handy, free-to-use tools for web developers, programmers and designers.
WebDevTrickA famous blog for many amazing HTML, CSS, JQuery designs.
css-tricksFree CSS tricks and some unique ideas for beginners and advanced
Material Design ResourcesUse Material tools, downloads, and interactive projects to simplify your workflow.
Nodesign.devA collection of tools for developers who have little to no artistic talent
A11ygatorA web tool to scan websites against WCAG rules
CommitizenCommand line tool to formatted commit messages according to the standards
CleanCssTool For Code Formatter, Minifier, File Converter
Tiny helpersA collection of free single-purpose online tools for web developers
CSS Ribbon GeneratorThis generator will assist in creating a pure CSS corner ribbon.
Can I UseCheck cross-browser compatibility of frontend technologies.
kangax-js-compat-tableCheck JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).
mydevice.ioMost commonly used device resolutions including phones and tablets
CodepenBuild, test and discover frontend code.
ResponsivelyA tool for designers and frontend developers to design and debug their in all platforms with ease
html2pdf.jsClient-side HTML-to-PDF rendering using pure JS.
CSS ReferenceA collection of all css properties and definitions in detail
Critical Path CSS GeneratorGenerate critical css for your web pages
SVG GobblerBrowser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG.
shortcode.devA collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more.
30secondsofcode.orgA wide variety of snippet and article collections for CSS, JavaScript, Python and more.
PlayCodeJavascript playground.
All The TagsAll HTML tags briefly explained.
Vue TelemetryReveal the Vue plugins and technology stack powering any website or explore a database of 5500+ websites.
Grid.jsGrid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
GerillassGerillass is a website development tool built on top of Sass with a set of Sass mixins and functions for frontend developers to generate scalable CSS outputs.
SketchizeSketchize is built for UI/UX Designers to help them design lovely apps for mobile, tablet, and desktop devices.
{CSS}PortalCSSPortal is home to a large range of CSS generators, tools and resources.
DevDocsDevDocs combines multiple API documentations in a fast, organized, and searchable interface.
papersizesThe best resource for International Paper Sizes, Dimensions & Formats.
flexboxfroggyHelp Froggy and friends by writing CSS code!
Designbetter BooksEssential reading on the practices that propel the best design teams forward.
OverAPICollection Of All Cheat Sheets.
PageclipA server for your Static HTML forms
ShieldsCreate badges with your own customization.
williamsharkeyRandom SVG Graphic Generator
Bootstrap CheatSheetAn interactive list of Bootstrap classes, variables, and mixins. The only Bootstrap CheatSheet you will ever need.
QR Code GeneratorUse QR Code Generator to easily create a QR code for your project.
PapersDBThe Biggest Paper Database with Sizes, Dimensions and Formats in Metric and Imperial units.
SETools.xyzFree Online tools website for work
SmallDev.toolsFree tool for developers to help with Beautify & Minify HTML/CSS/Javascript, and many other handy tools. With a delightful interface.
Angry ToolsFree web tools for speed up your development.
Rapid APIDiscover and connect to thousands of APIs.
Readme.soThe easisest way to create a README.
ShowcodeBeautiful code screenshot generator.
tldrawA tiny little drawing app.
devices.cssPure CSS phones and tablets by Marvel App.
TrooplBuild and publish a free portfolio in minutes.
ApifoxApifox = Postman + Swagger + Mock + JMeter
A Modern CSS ResetResets the css styling of all HTML elements to a consistent baseline across browsers.
ClipperlyAll-in-one free online file service, convert, edit and optimize your files.
DebugBear Speed TestTest and optimize page load speed
Code BeautifyFree Online Tools like Code Beautifiers, Code Formatters, Editors, Viewers, Minifier, Validators, Converters for Developers
Vue CheatSheetAn interactive cheatsheet of Vue, Vue Router, and Pinia. The only Vue CheatSheet you will ever need.
appydevA collection of awesome tools, resources and products for people who create and live on the internet.
ExtendsClassFree online tools for developers, including image compressors/encoders, code formatters, code playgrounds, and many other handy utilities.
RunJSFree online JavaScript playground.
PillarstackAssorted resources for frontend developers and web designers.
<div align="right"> <b><a href="#table-of-contents">↥ Back To Top</a></b> </div>