A React + Tailwind CSS demo project showcasing how to build a Dark/Light theme toggle using React Context API. It also includes interactive UI components with smooth animations powered by Lucide Icons and Tailwind utilities.

• 🌓 Dark & Light Mode Toggle (Context API + Tailwind)

• 🎨 Reusable Feature Cards with animations

• ⚡ Interactive Counter Demo with transitions

• 📦 Component-Based Structure for scalability

• 🖌️ Lucide React Icons integration

npm install framer-motion react tailwindcss postcss autoprefixer

import { ThemeProvider } from "./components/ThemeContext";
import ThemeControl from "./components/ThemeControl";
import FeatureCard from "./components/FeatureCard";
import DemoSection from "./components/DemoSection";


function App() {
  return <ThemeControl />;
}

• react: ^19.0.0 - React framework
• tailwindcss: 4.1.12 - Utility-first CSS framework

Color Scheme - Update the tailwind setup and config

1. ThemeContext.js - Handles global theme state (light / dark) using React Context API.
2. ThemeControl - Interactive toggle button with Sun/Moon icons.
3. FeatureCard - Responsive feature grid with Lucide icons & hover animations.
4. DemoSection - Counter demo that shows state + theme management integration.

• useState
• useContext
• Custom Hook → useTheme

All animations are responsive and work on:

• Desktop
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

MIT License - Feel free to use in personal and commercial projects.

1. Fork the repository
2. Create your feature branch
3. update and install tailwind, autoprefixer, lucide-react, and postcss
4. Make your changes
5. Submit a pull request

If you have questions or need help implementing:

• Open an issue on GitHub
• Please check Context API documentation
• Review Tailwind CSS documentation

• Codesandbox.io Link
• Tailwind CSS Docs

Built with ❤️ by Krishna S (Waller)