https://github.com/santhoshpandi/datrix-dashboard-react
React modern responsive dashboard template built using React, Tailwind CSS, and Vite.It is designed to be a starting point for building customizable admin dashboards and other web applications.
https://github.com/santhoshpandi/datrix-dashboard-react
admin-template dashboard-templates mini-project react react-template react-website responsive responsive-website tailwindcss vite website
Last synced: 10 months ago
JSON representation
React modern responsive dashboard template built using React, Tailwind CSS, and Vite.It is designed to be a starting point for building customizable admin dashboards and other web applications.
- Host: GitHub
- URL: https://github.com/santhoshpandi/datrix-dashboard-react
- Owner: santhoshpandi
- Created: 2024-12-15T11:28:14.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T16:31:00.000Z (12 months ago)
- Last Synced: 2025-02-22T17:28:39.359Z (12 months ago)
- Topics: admin-template, dashboard-templates, mini-project, react, react-template, react-website, responsive, responsive-website, tailwindcss, vite, website
- Language: JavaScript
- Homepage: https://santhoshpandi.github.io/Datrix-Dashboard-React/
- Size: 1.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Dashboard Template
This is a modern, responsive dashboard template built using `React`, `Context API`, `Tailwind CSS`, and `Vite`. The dashboard includes a sliding navigation bar with different sections, a dark mode toggle, responsive design, and several chart components. It is designed to be a starting point for building customizable admin dashboards and other web applications.
## Developed by
- `Santhosh Pandi` -- **Live Preview** https://santhoshpandi.github.io/Datrix-Dashboard-React/
## Screenshots
## Features
- **Separated Navigation Bar**: Includes side navigation with animated sliding effect, which is also customizable by `js` file. Sections include:
- **Home**
- **Trends**
- **Layout** (Computer, Tablet, Mobile, etc.)
- **Plans** (Basic, Advanced, Pro, etc.)
- **State Management**: Context API is used for State Management like (theme, slidingMenu, slidingNavBar etc.). Here we have created a state `useSlide`
- **Routing**: Each navigation item routes to its corresponding component for dynamic content display.
- **Responsive Design**: The layout adjusts to different screen sizes, ensuring the dashboard looks great on both desktop and mobile devices.
- **Dark Mode**: A toggle to switch between dark and light modes for better accessibility.
- **Charts**: Integrated with chart components for data visualization, suitable for analytics dashboards.
- **Customizable Components**: Easily customizable components to fit various use cases.
- **Customized 404 Page**: A custom 404 page is included to handle "not found" errors gracefully, improving the user experience when navigating to non-existent routes.
## Technologies Used
- **React**: For building the UI components and managing the application state.
- **Tailwind CSS**: For utility-first styling and responsive design.
- **Vite**: A fast and optimized build tool for React applications.
## Getting Started
### Prerequisites
Make sure you have the following installed on your system:
- **Node.js**: Version 14 or higher
- **npm**: Version 6 or higher
- **Git**: Version 6 or higher
### Installation
1. Clone the repository:
```bash
git clone https://github.com/santhoshpandi/Datrix-Dashboard-React.git
```
2. Navigate to the project directory:
```bash
cd Datrix-Dashboard-React
```
3. Install the dependencies:
```bash
npm install
```
4. Start the Development server:
```bash
npm run dev
```
The dashboard will be available at http://localhost:5173
## File Structure
/public
├── index.html # Main HTML file
/src
├── assets # Images, icons, etc.
├── components/ # Reusable UI components like Navbar, Sidebar, etc.
├── contexts/ # Context API for State Management
├── views/ # Different pages like Home, Trends, Layout, etc.
├── App.jsx # Main React app component
├── main.jsx # Entry point for React
├── nav.js # Consist of Data about the NavItem and its path
├── routes.js # Consist of Routes of Components
├── index.css # Tailwind configuration and custom styles
├── App.css # Tailwind custom styles
/tailwind.config.js # Tailwind configuration
/vite.config.js # Vite configuration
/package.json # Project dependencies and scripts
### Usage
- **Navigation Bar**: Click on different navigation items (like Home, Trends, Layout, etc.) to navigate to different sections of the dashboard.
- **Dark Mode Toggle**: The dark mode can be toggled by clicking the switch in the top-right corner of the dashboard. The theme will persist across page reloads.
- **Charts**: Use the pre-built chart components to display data, or customize them according to your needs.
## Customization
You can easily customize the look and feel of the dashboard by:
- **Modifying the `tailwind.config.js` file**: Adjust Tailwind's design system by extending or overriding default configurations such as colors, fonts, breakpoints, etc.
- **Customizing the components and pages**: Modify or add components in the `/src/components` folder and pages in the `/src/pages` folder to change the layout, add new sections, or update existing content.
- **Adding more charts or data visualizations**: You can integrate additional chart libraries like **Chart.js** or **Recharts** for more advanced data visualization features. Simply install the required libraries and update the chart components.
## Acknowledgments
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
- **Vite**: An extremely fast build tool for modern web projects.
- **React**: A JavaScript library for building user interfaces.
- **Context API**: A Built-in method in react used for State Management.
- **Chart.js**: For displaying interactive charts.