/react-dashboard

Explore our React.js dashboard with both light and dark themes. Customize your experience for various lighting conditions and preferences.

Primary LanguageJavaScript

Modern Dashboard / Admin Panel

I have developed a dynamic React.js dashboard that offers users the flexibility to switch between two distinct themes: a light theme and a dark theme. This feature allows users to personalize their dashboard experience based on their preferences and environmental conditions. In the light theme, the dashboard likely features a bright and clean design with light-colored backgrounds and text. This theme may be preferred for well-lit environments or users who prefer a classic look. In contrast, the dark theme is designed for users who prefer a more visually comfortable experience in low-light conditions or simply prefer a modern and sleek appearance. This theme typically incorporates dark backgrounds and light-colored text, reducing eye strain and providing a contemporary aesthetic.

Packages

Dashboard
├── Vite                     # Development Environment       
│   └── v4.4.5
│
├── React-js                 # JS Library       
│   └── vl8.2.0
│
├── React-router-dom         # Routing       
│   └── vl6.5.0
│
├── Tailwind CSS             # CSS Library
│   ├── v3.3.3
│
├── react-apexcharts         # Charts (Candlestick chart & Donut Chart)
│   ├── v1.4.1
│
├── apexcharts               # Chart Design
│   ├── v3.42.0
└── ┘

Fetures

Dashboard
├── Navbar     
├── Sidebar     
├── Individual Component     
├── Theme     
│   └── Light
│   └── Dark
├── Table
├── Data Read from json
└── ┘
Project UI
light-theme
dark-theme

To Run Project in your Local PC follow the following steps:

Clone My GitHub Repository from:

https://github.com/Joyontokarmakar/react-dashboard.git

Installation

$ npm install

or

$ yarn

Run Your Project

$ npm run dev 

or

$ yarn dev