6 Useful Webs For New React Developer 📮

Muhammad Hassam — Sun, 06 Jul 2025 14:44:02 +0000

I’ve gathered 7 gems using these will definitely give you a creative edge as a new React developer.

1. 🧠 ReactBits
ReactBits isan open source collection of animated, interactive & fully customizable React components for building stunning, memorable websites. Whether it's button animations, loaders, modals, or hover cards. This site offers lightweight and reusable React patterns that feel modern and perform well.

Check out ReactBits

*2. 💎 Lucide React *
Lucide is a community-driven fork of Icons with a React-specific package. If you're tired of mixing random SVGs and want a consistent visual language across your UI, Lucide is the go-to choice.

Check out Lucide

3. 🎠 Splide.js
Splide is a super flexible slider library that doesn’t rely on jQuery. It’s lightweight (under 30KB), fully responsive, and comes with rich features like sync sliders, thumbnails, lazy loading, and autoplay.

Check out Splide.js

4. 🌀 Motion.dev
Motion is Framer’s open-source animation library for React that brings high-performance animations.

Check out Motion

5. 🖼️ SVGRepo
SVGRepo hosts over 400,000+ free SVG icons and vector illustrations, ready to plug into any project. What makes it special is the unified style options, color customization, and download formats.

Check out SVGRepo

6. ✏️ Excalidraw
Excalidraw isn’t just a drawing tool — it’s a mind-mapping superpower. Perfect for wireframes, system architecture, and UI planning. The best part? It’s collaborative, fast, and export-friendly.

Check out Excalidraw

Which one are you going to explore first? 🎯

Like & Share to motivate me to create more posts like this! 💡

Implement Dark Mode in Tailwind v4.0 + React 🌙

Muhammad Hassam — Sun, 16 Feb 2025 07:38:50 +0000

With Tailwind v4.0 removing tailwind.config.js, the approach to dark mode has also changed! No worries, though—here’s how you can set it up in your React app.
I will show you the easiest way to implement dark mode with React and tailwind v4.0

▶️ Install Tailwind CSS

Follow the official Tailwind Docs to install Tailwind in your React project.

▶️ Configure Global CSS

Since tailwind.config.js is no longer available, add the following to your index.css:

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

▶️ Create a Dark Mode Toggle Component

import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react'

function ToggleTheme() {
    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

    useEffect(()=>{
        localStorage.setItem('theme',theme);
        document.documentElement.classList.toggle('dark', theme === 'dark');
    },[theme])

    const toggleTheme = ()=>{
        setTheme(theme === 'light' ? 'dark':'light');
    }
  return (
    <button onClick={toggleTheme} className='text-black dark:text-white'> {theme === 'light' ? 'Dark Mode' : 'Light Mode'}</button>
  )
}

export default ToggleTheme;

Just import this ToggleTheme component anywhere in your project, and you're good to go! Your React app will now have a functional dark mode switch.

Like & share if this helped!💡

Forem: Muhammad Hassam

6 Useful Webs For New React Developer 📮

Implement Dark Mode in Tailwind v4.0 + React 🌙