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.
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
└── ┘
Dashboard
├── Navbar
├── Sidebar
├── Individual Component
├── Theme
│ └── Light
│ └── Dark
├── Table
├── Data Read from json
└── ┘
Project UI |
---|
https://github.com/Joyontokarmakar/react-dashboard.git
$ npm install
or
$ yarn
$ npm run dev
or
$ yarn dev