bloomui/tokyo-free-white-react-admin-dashboard

Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard

Free React Typescript Admin Dashboard Template built with Material-UI

This free and open source admin dashboard template is built for React and it’s bootstrapped from Facebook’s create-react-app. All NPM dependencies are up to date and it contains multiple fully customized components based on the popular frontend components framework, Material-UI.

Tokyo Free White Typescript Dashboard features a nice classic light & clean design and color scheme.

You can customize the color scheme and style by editing a single variables files. This Typescript admin dashboard doesn’t use SCSS stylesheets but the more modern approach with styled-components.

We’ve included a few page examples for most used user flows that will give you a solid base for getting started with your new project’s development. With very light modifications you can even integrate Tokyo Free White Typescript Dashboard into existing projects giving them a much deserved makeover.

---

Updrade to PRO

If you're looking for more features like translations, complex user flows, redux examples and more, we recommend taking a look at the premium version (Tokyo White Typescript Dashboard) on bloomui.com

---

Quick Start

1. Make sure you have the latest stable versions for Node.js and NPM installed
2. Clone repository: git clone https://github.com/bloomui/tokyo-free-white-react-admin-dashboard.git
3. Install dependencies: Run npm install inside the project folder
4. Start dev server: After the install finishes, run npm run start. A browser window will open on http://localhost:3000 where you''ll see the live preview

---

Technical Support

You can open a support ticket by sending an email here: [email protected]

tokyo-free-white-react-admin-dashboard's Issues

3.1 pro nextjs ts

https://bloomui.com/product/tokyo-white-nextjs-typescript-material-ui-admin-dashboard/
I want to have 3.1 pro nextjs ts but it is very very expensive. What should I do?

No effect of pressing the buttons

Why doesn't the wave effect work when the buttons are pressed? How can we get it back?

Unable to resolve dependencies

Sidebar no longer shows up on Chrome browser?

Hello,

I bought the paid version of this 3 weeks ago, but have yet to hear any responses to my questions.

My current question is, why does the sidebar now no longer appear on my Chrome browser? It shows up on Firefox but has disappeared from Chrome?

If I change 'variant' to 'permanent', it shows up, but then it is not responsive relative to the body's main content?

What happened? Also, do you plan to support React v18 in the future? (It has been released for quite some time now).

Thank you,

Rob Liou

Dependancy Issue stopping me running NPM Install and testing.

npm install gives me

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! dev @typescript-eslint/eslint-plugin@"5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/eslint-plugin@"^4.29.3" from [email protected]
npm ERR! node_modules/eslint-config-airbnb-typescript
npm ERR! dev eslint-config-airbnb-typescript@"14.0.1" from the root project

looks like a wonderful template, any idead - i am downloading the zip and directly extracting

Can't find any textInput with dropdown component

Where can I find a textInput with dropdown ? I can't find any in the exemples :( Otherwise how can I create one ?

Error/s occurred when starting the app

`webpack compiled with 1 error
ERROR in src/components/Scrollbar/index.tsx:16:6
TS2786: 'Scrollbars' cannot be used as a JSX component.
Its instance type 'Scrollbars' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
14 |
15 | return (

16 | <Scrollbars
| ^^^^^^^^^^
17 | autoHide
18 | renderThumbVertical={() => {
19 | return (

ERROR in src/content/applications/Messenger/index.tsx:86:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
84 | return (
85 | <>

86 |
| ^^^^^^
87 | <title>Messenger - Applications</title>
88 |
89 |

ERROR in src/content/applications/Transactions/index.tsx:12:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
10 | return (
11 | <>

12 |
| ^^^^^^
13 | <title>Transactions - Applications</title>
14 |
15 |

ERROR in src/content/applications/Users/profile/index.tsx:28:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
26 | return (
27 | <>

28 |
| ^^^^^^
29 | <title>User Details - Management</title>
30 |
31 | <Container sx={{ mt: 3 }} maxWidth="lg">

ERROR in src/content/applications/Users/settings/index.tsx:38:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
36 | return (
37 | <>

38 |
| ^^^^^^
39 | <title>User Settings - Applications</title>
40 |
41 |

ERROR in src/content/dashboards/Crypto/AccountBalance.tsx:219:18
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
217 | alignItems="center"
218 | >

219 | <Chart
| ^^^^^
220 | height={250}
221 | options={chartOptions}
222 | series={chartSeries}

ERROR in src/content/dashboards/Crypto/index.tsx:15:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
13 | return (
14 | <>

15 |
| ^^^^^^
16 | <title>Crypto Dashboard</title>
17 |
18 |

ERROR in src/content/dashboards/Crypto/WatchListColumn.tsx:220:12
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
218 |
219 |

220 | <Chart
| ^^^^^
221 | options={chartOptions}
222 | series={chart1Data}
223 | type="area"

ERROR in src/content/dashboards/Crypto/WatchListColumn.tsx:295:12
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
293 |
294 |

295 | <Chart
| ^^^^^
296 | options={chartOptions}
297 | series={chart2Data}
298 | type="area"

ERROR in src/content/dashboards/Crypto/WatchListColumn.tsx:370:12
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
368 |
369 |

370 | <Chart
| ^^^^^
371 | options={chartOptions}
372 | series={chart3Data}
373 | type="area"

ERROR in src/content/dashboards/Crypto/WatchListRow.tsx:209:14
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
207 |
208 |

209 | <Chart
| ^^^^^
210 | options={Box1Options}
211 | series={Box1Data}
212 | type="line"

ERROR in src/content/dashboards/Crypto/WatchListRow.tsx:278:14
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
276 |
277 |

278 | <Chart
| ^^^^^
279 | options={Box1Options}
280 | series={Box2Data}
281 | type="line"

ERROR in src/content/dashboards/Crypto/WatchListRow.tsx:347:14
TS2786: 'Chart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
345 |
346 |

347 | <Chart
| ^^^^^
348 | options={Box1Options}
349 | series={Box3Data}
350 | type="line"

ERROR in src/content/overview/index.tsx:20:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
18 | return (
19 |

20 |
| ^^^^^^
21 | <title>Tokyo Free White React Typescript Admin Dashboard</title>
22 |
23 |

ERROR in src/content/pages/Components/Accordions/index.tsx:23:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
21 | return (
22 | <>

23 |
| ^^^^^^
24 | <title>Accordions - Components</title>
25 |
26 |

ERROR in src/content/pages/Components/Avatars/index.tsx:52:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
50 | return (
51 | <>

52 |
| ^^^^^^
53 | <title>Avatars - Components</title>
54 |
55 |

ERROR in src/content/pages/Components/Badges/index.tsx:44:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
42 | return (
43 | <>

44 |
| ^^^^^^
45 | <title>Badges - Components</title>
46 |
47 |

ERROR in src/content/pages/Components/Buttons/index.tsx:21:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
19 | return (
20 | <>

21 |
| ^^^^^^
22 | <title>Buttons - Components</title>
23 |
24 |

ERROR in src/content/pages/Components/Cards/index.tsx:64:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
62 | return (
63 | <>

64 |
| ^^^^^^
65 | <title>Cards - Components</title>
66 |
67 |

ERROR in src/content/pages/Components/Forms/index.tsx:71:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
69 | return (
70 | <>

71 |
| ^^^^^^
72 | <title>Forms - Components</title>
73 |
74 |

ERROR in src/content/pages/Components/Modals/index.tsx:99:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
97 | return (
98 | <>

99 |
| ^^^^^^
100 | <title>Modals - Components</title>
101 |
102 |

ERROR in src/content/pages/Components/Tabs/index.tsx:62:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
60 | return (
61 | <>

62 |
| ^^^^^^
63 | <title>Tabs - Components</title>
64 |
65 |

ERROR in src/content/pages/Components/Tooltips/index.tsx:20:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
18 | return (
19 | <>

20 |
| ^^^^^^
21 | <title>Tooltips - Components</title>
22 |
23 |

ERROR in src/content/pages/Status/ComingSoon/index.tsx:102:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
100 | return (
101 | <>

102 |
| ^^^^^^
103 | <title>Status - Coming Soon</title>
104 |
105 |

ERROR in src/content/pages/Status/Maintenance/index.tsx:32:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
30 | return (
31 | <>

32 |
| ^^^^^^
33 | <title>Status - Maintenance</title>
34 |
35 |

ERROR in src/content/pages/Status/Status404/index.tsx:44:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
42 | return (
43 | <>

44 |
| ^^^^^^
45 | <title>Status - 404</title>
46 |
47 |

ERROR in src/content/pages/Status/Status500/index.tsx:54:8
TS2786: 'Helmet' cannot be used as a JSX component.
Its instance type 'Helmet' is not a valid JSX element.
52 | return (
53 | <>

54 |
| ^^^^^^
55 | <title>Status - 500</title>
56 |
57 |

ERROR in src/content/pages/Status/Status500/index.tsx:106:12
TS2786: 'Hidden' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
104 |
105 |

106 |
| ^^^^^^
107 | <GridWrapper
108 | xs={12}
109 | md={6}

ERROR in src/index.tsx:11:4
TS2786: 'HelmetProvider' cannot be used as a JSX component.
Its instance type 'HelmetProvider' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
9 |
10 | ReactDOM.render(

11 |
| ^^^^^^^^^^^^^^
12 |
13 |
14 |

ERROR in src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx:153:18
TS2786: 'Hidden' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass'.
Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Andrew/Repositories/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
151 |
152 |

153 |
| ^^^^^^
154 |
155 | <Avatar
156 | sx={{

ERROR in src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx:192:18
TS2786: 'Hidden' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
190 | <Divider sx={{ my: 1 }} component="li" />
191 |

192 |
| ^^^^^^
193 |
194 | <Avatar
195 | sx={{

ERROR in src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx:230:18
TS2786: 'Hidden' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
228 | <Divider sx={{ my: 1 }} component="li" />
229 |

230 |
| ^^^^^^
231 |
232 | <Avatar
233 | sx={{

ERROR in src/layouts/SidebarLayout/Header/Userbox/index.tsx:83:10
TS2786: 'Hidden' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
81 |
82 |

83 |
| ^^^^^^
84 |
85 | {user.name}
86 |

ERROR in src/layouts/SidebarLayout/Header/Userbox/index.tsx:91:10
TS2786: 'Hidden' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
89 |
90 |

91 |
| ^^^^^^
92 | <ExpandMoreTwoToneIcon sx={{ ml: 1 }} />
93 |
94 |

ERROR in src/theme/ThemeProvider.tsx:20:6
TS2786: 'StylesProvider' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<any, any, any>' is not a valid JSX element.
18 |
19 | return (

20 |
| ^^^^^^^^^^^^^^
21 | <ThemeContext.Provider value={setThemeName}>
22 | {props.children}
23 | </ThemeContext.Provider>`

Does not compile

On commit 7537cfb92128df82e26d14197bfdd87f8b72a0e6

Using node v14.17.4

TS2786: 'Chart' cannot be used as a JSX component.
  Its instance type 'ReactApexChart' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/nikunj/git/tokyo-free-white-react-admin-dashboard/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.