https://github.com/katerinalupacheva/dashboard-layout
React Material UI Dashboard layout template
https://github.com/katerinalupacheva/dashboard-layout
dashboard material-ui muiv5 react template typescript
Last synced: 3 months ago
JSON representation
React Material UI Dashboard layout template
- Host: GitHub
- URL: https://github.com/katerinalupacheva/dashboard-layout
- Owner: KaterinaLupacheva
- License: mit
- Created: 2021-01-11T15:36:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-16T12:10:26.000Z (almost 3 years ago)
- Last Synced: 2023-03-04T05:52:06.979Z (over 2 years ago)
- Topics: dashboard, material-ui, muiv5, react, template, typescript
- Language: TypeScript
- Homepage: http://katerinalupacheva.github.io/dashboard-layout
- Size: 3.41 MB
- Stars: 30
- Watchers: 2
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Material UI Dashboard Layout template
[Live-Demo](https://katerinalupacheva.github.io/dashboard-layout/)
Starter code with the implementation of:
- Basic layout: header, the main content area with drawer, footer
- Drawer toggle
- Navigation between pages
## Features
- React v18
- TypeScript v4
- Material-UI v5
- React Router v6
- React Context
- React Hooks
- Responsive
- Create-react-app under the hood
## Quick Start
1. Get the latest version
```shell
git clone https://github.com/KaterinaLupacheva/dashboard-layout.git MyDashboard
cd MyDashboard
```
2. Run
```shell
npm install
```
3. Run
```shell
npm start
```
4. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
### How to create from scratch
I wrote the blog post on how to create Dashboard layout. You can read it [here](https://ramonak.io/posts/dashboard-layout-react-material-ui).
### Pure React version
The starter code of this Dashboard layout in pure React.js (without Material-UI) is in [this branch](https://github.com/KaterinaLupacheva/dashboard-layout/tree/pure-react).