Frontend Resources V2! 🚀

This content originally appeared on DEV Community and was authored by Miguel

🚀 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

Animations

This content originally appeared on DEV Community and was authored by Miguel

Print Share Comment Cite Upload Translate Updates

APA

Miguel | Sciencx (2024-09-01T13:49:50+00:00) Frontend Resources V2! 🚀. Retrieved from https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/

MLA

" » Frontend Resources V2! 🚀." Miguel | Sciencx - Sunday September 1, 2024, https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/

HARVARD

Miguel | Sciencx Sunday September 1, 2024 » Frontend Resources V2! 🚀., viewed ,<https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/>

VANCOUVER

Miguel | Sciencx - » Frontend Resources V2! 🚀. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/

CHICAGO

" » Frontend Resources V2! 🚀." Miguel | Sciencx - Accessed . https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/

IEEE

" » Frontend Resources V2! 🚀." Miguel | Sciencx [Online]. Available: https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/. [Accessed: ]

rf:citation

» Frontend Resources V2! 🚀 | Miguel | Sciencx | https://www.scien.cx/2024/09/01/frontend-resources-v2-%f0%9f%9a%80/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

UI: