https://github.com/mahfuzhasan2003/grid-lights

Grid Lights is a customizable grid-based UI system that allows users to toggle lights within a dynamic grid system. Built using React, Tailwind CSS, and modern JavaScript. Browse with desktop for better experience!!
https://github.com/mahfuzhasan2003/grid-lights

cssgridlayout es6-javascript reactjs tailwindcss

Last synced: 23 days ago
JSON representation

Grid Lights is a customizable grid-based UI system that allows users to toggle lights within a dynamic grid system. Built using React, Tailwind CSS, and modern JavaScript. Browse with desktop for better experience!!

• Host: GitHub
• URL: https://github.com/mahfuzhasan2003/grid-lights
• Owner: mahfuzHasan2003
• Created: 2025-02-16T05:49:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-17T08:11:17.000Z (over 1 year ago)
• Last Synced: 2025-08-27T20:54:55.919Z (9 months ago)
• Topics: cssgridlayout, es6-javascript, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://grid-lights.surge.sh/
• Size: 57.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Grid Lights

🌟 **Overview**

Grid Lights is a customizable grid-based UI system that allows users to toggle lights within a dynamic grid system. Built using React, Tailwind CSS, and modern JavaScript, Grid Light is designed for interactive applications, settings panels, or creative UI experiments.

🚀 **Features**

- 📌 **Draggable Layout** – Move the grid layout setter anywhere on the screen.

- 🎨 **Customizable Grid Size** – Adjust the number of rows and columns.

- 🏗 **Toggleable Cells** – Click to turn individual grid lights on/off.

- 💾 **State Management** – Maintains light states dynamically.

- 📱 **Touch & Mouse Support** – Works seamlessly on both desktop and mobile devices.

🛠 **Tech Stack**

- React – Component-based UI

- Tailwind CSS – Styling with utility classes

📦 **Installation**

Follow these steps to get the project up and running:

1. Clone the repository

   ```bash

   git clone https://github.com/mahfuzHasan2003/Grid-Lights.git

   ```

2. Navigate into the project folder

   ```bash

   cd Grid-Lights

   ```

3. Install the dependencies

   ```bash

   npm install

   ```

4. Start the development server

   ```bash

   npm run dev

   ```

🖥 **Live View**

Check out the live view [here](https://grid-lights.surge.sh/).