UI & UX tools & libraries
The Easy Way to Design Top Tier Websites
snippets and components
- Uiverse.io
- codepen.io
- color picker: coolors.co
- gradient hunt: curated list of beautiful gradients.
- css 3d elements editor http://tridiv.com/
- AI generate components and assets: Developing with AI tools and image and video AI generation
animations
- lenis scrolling animations
- GSAP
- matter.js 2d physics engine.
maps
UI / component libs
- HeadlessUI unstyled components. they give you the js functionality and nothing else
- ShadCN. copy paste components. many are built on top of radix. tailwind & react focused.
- radix are accessible, unstyled, React primitives.
- headlessui is the equivalent of radix from the tailwind team.
- BaseUI is the equivalent made by the MUI team.
- React MUI Material UI
- daisyUI (tailwind)
- material design components (oficial google site) https://m3.material.io/components
- chakra
- mantine
- gluestack
- tailwind elements https://tailwind-elements.com/ https://github.com/mdbootstrap/TW-Elements by the same ppl of MDB. seems abandoned
- tailwind plus (former tailwindui) by the tailwind team, paid & expensive
Comparing Modern CSS Solutions (Tailwind vs MUI vs Bootstrap vs Chakra vs...) this vid compares and plots into a diagram each lib
tailwind -> daisy -> mui
update on that vid
css-in-js is dead
pigment-css is the css-in-js solution by the MUI team. looks good.
Bootstrap
as of 2025 I think I shouldn't use Bootstrap anymore.
- MDB https://mdbootstrap.com/ mdb is a material design UI kit that can be setup with multiple frameworks like bootstrap, react, vue...
- https://htmlrev.com/: free html, Bootstrap and tailwind templates.
Bootstrap and by extension MDB can be 'bootstrapped' to any project, even if it uses frameworks like React, Vue... in the end it is just a stylesheet and some .js
HTML / CSS
icons
- lucide
- https://github.com/notlmn/awesome-icons
- https://www.flaticon.com/
- https://www.svgrepo.com/collection/lifestyle-tritone-icons/