π Supercharge Your Development with These Resources! π
π Hey everyone! π
After the great response to my previous post on Frontend Resources, Iβve decided to create an updated version. This time, Iβve included not only all the tools and libraries I shared before but also a bunch of new resources I've discovered since then.
This collection is packed with a wide range of tools that cover everything from building stunning user interfaces to fine-tuning performance and much more. These resources have been invaluable in my own projects, and Iβm excited to share them with you. I hope theyβll be just as useful for you as they have been for me!
Feel free to share any additional resources you use or find interestingβIβd love to add them to the list! Letβs dive in!
UI:
- Material Tailwind: A robust UI kit combining Material Design and Tailwind CSS
- MiracleUI: Components built in pure CSS and customizable
- Bentoed: A html/css/tailwind bento catalog
- Aceternity UI: Sleek and modern UI components for your next project
- NextUI: Craft beautiful interfaces effortlessly with NextUI
- ChakraUI: A simple, modular, and accessible component library
- Trading view Charts: Power up your data visualization game with lightweight charts from TradingView
- AutoAnimate: Easily create stunning animations with AutoAnimate
- React-magic-motion: Add a touch of magic to your React components
- Keep React: Keep your React components fresh and stylish
- Daisy UI: Create delightful interfaces with Daisy UI
- ShadCn: Elevate your UI with sleek and elegant components
- Clip path: Get creative with shapes using Clippy
- Radix: Build powerful and composable UIs with Radix
- Layout generator: Design flexible layouts with ease
- Utilities: A handy toolkit for gradients, cursors, and more
- Image Generator: Instantly spruce up your designs with high-quality images
- Buttons: Button up your UIs with style
- PrimeReact: Prime components for your React applications
- Everything in one page: Explore a curated collection of resources
- Beer CSS: A semantic HTML CSS framework based on Material Design 3.
Gradients:
- Firecms: Dynamic gradients for your projects
- Shadergradient: Create stunning shader gradients effortlessly.
- MSHR: A collection of 434 vanilla CSS mesh gradients free for you to use in any of your projects.
SVGs:
- Shapes: Beautiful SVG shapes for your designs
- SVGs: Discover a vast collection of SVGs
- SVG Illustrations: Add life to your projects with illustrations from Undraw
- Flags: 250+ open source flag icons to use in your design tool or in your code project
Icons:
Others:
- Sliders β Swiper: Swipe through content seamlessly
- Toast notifications β Sonner: Toast notifications made easy
- Atropos - 3D Elements: Add immersive 3D elements to your projects
- Auto Animate (Native Javascript): Effortlessly animate elements with vanilla JavaScript
- Vaul (Mobile Slider): Elevate your sliders with Vaul
- Videos performance optimizer: Optimize video performance with Lite YouTube Web Component
- Calendar: Streamline your scheduling process
- Contrast picker: Ensure accessibility with Coolors' contrast checker
- Image optimizer: Squoosh your images for better performance
- Relative Time: Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
- Shots: Create beautiful photos to showcase your projects.
- Profile Readme Generator Github: Create a github Profile README
- Responsively: App to develop with multiple responsive views simultaneously
- Apis
Tailwind:
- Animations: Add flair to your UIs with Tailwind CSS Animated
- Intersection Observer: Tailwind CSS Intersect for observing intersections
- Backgrounds: Spruce up your backgrounds with ease
- Bentoed: A html/css/tailwind bento catalog
JavaScript:
- Masonry Grid: Create dynamic grid layouts with ease
- MiniMasonry: A lightweight alternative for masonry layouts
- Gallery PhotoSwipe: Showcase your images elegantly with PhotoSwipe
- Gallery LightGallery: LightGallery for stunning image galleries
- Tempo: Simplify time-based operations with Tempo
- Tippy (Tooltips): Enhance user experience with customizable tooltips
- Intersection Observer: A guide to Intersection Observer for efficient scrolling
- Infinite Scroll: Implement infinite scrolling effortlessly
- Just: A library for common JavaScript utilities
- GLTFs into JSX: Convert GLTF files into JSX components
- Theme Toggle Effect: Switch between dark and light theme with a beautiful animation.
- Code Speed Comparation
React:
- Counter: Count up your numbers dynamically
- Masonry layout: Build responsive masonry layouts in React
- Drag and Drop: Effortlessly implement drag and drop functionality
- FilePond: Simplify file uploads with FilePond
- Faker: Generate realistic fake data with Faker
- Random: Spice up your projects with random words
- Charts: Visualize data beautifully with Chart.js
- UseSound: Incorporate sound effects into your React apps
- ReCharts: Charting library built on React components
- Floating UI (Tooltips): Floating UI for interactive tooltips
- Tippy (Tooltips): Tippy.js for React applications
- Calendar: Another calendar resource for all your scheduling needs
- CMDK Console: A console for your React applications
- Sliders
- Drag To Swap
Top comments (42)
Nice, this is useful! Thanks for sharing it.
Lets Go !!! Great Resources Thanks Mate Definetly BookMarked.
Great job! :)
Lovely!
Thanks for sharing these resources!
Great job thank you!
Amazing. Great list!
Amazing proyect, nice work!!!
Thanks a lot!
Have you checked Polipo (demo video, website)?
A really amazing project, thanks for sharing it
Really good, thanks for the resources!
Grateful for resources, i love it!
Good post!