Frontend resources! 🚀

🚀 Supercharge Your Development with These Resources! 🚀

👋 Hello everyone! 👋

I'm thrilled to share this collection of resources I've gathered over time, which have been a lifesaver in many of the projects I've worked on. This compilation brings together a variety of tools and libraries spanning from user interface creation to performance optimization and beyond. I hope you can also make the most out of some of these wonderful resources. Let's dive right in!

Feel free to comment with any other resources that you use or find interesting so I can add them to the post!

UI:

• Material Tailwind: A robust UI kit combining Material Design and Tailwind CSS
• 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

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

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

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

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

Comments

[Ali Zulfaqar]

Thank you for sharing the knowledge, really appreciate it

[Miguel]

A pleasure! thanks for your comment and happy coding !

[dawitel]

this is very useful for junior devs like myself. Thanks a lot

[Miguel]

you're welcome, happy coding! :)

[Lotfi Jebali]

WOW THANK YOU

[Miguel]

A pleasure!!! :)

[Kudzai Murimi]

Excellent!

[NafisMahmudAyon]

Please checkout a component Library called "Landing Page UI".
Give your feedback to improve the component Library.

Website: Landing Page UI

NPM: npmjs.com/package/landing-page-ui

Github: github.com/NafisMahmudAyon/landing...

[John]

Woow, wonderful!!!
your are Dev.to's ⭐
Thank you.

[Miguel]

thank you for your comment! :)

[Kiran Naragund]

Great collection
Thanks for sharing 🙏

[Miguel]

you're welcome, happy coding! :)

[Adamnator]

Checkout Mantine UI too, it's the best component library I ever used

[Miguel]

i will do, thank you a lot. I’ll add it to the post once im home :)

[Ueh-Kabari Lesuuh]

Thank you for sharing...
are the resources free to use?

[Miguel]

Yes! you're welcome :)

[Fátima]

good job!!!!

[Patrick Monteiro]

Very good

[Meir Meir]

Thanks a lot 👍

[Miguel]

you're welcome! happy coding :)

[Kefi AGBEKO]

I have never used any of them but will surely use some.
Thanks for sharing!

[Anand]

Great resource 👍..
Thanks for sharing such resources

[Miguel]

you're welcome! :)

[PROLIFIC]

Thank you very much for this 🙏 ❤

[Miguel]

you’re welcome! :)