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

Free React Typescript Admin Dashboard Template built with MUI (Material-UI) featuring a light color scheme

Tokyo Free White Typescript Next.js Admin Dashboard

Free Material-UI Next.js Typescript Dashboard Template with Dark Color Scheme

Tokyo Free White Next.js Typescript Dashboard is built using the latest industry standards and features a clean and premium design style, making use of colors and accents to improve the user experience for all included flows and pages.

It is powered by Next.js, Typescript and React and contains multiple components customized on top of Material-UI – which is one of the best UI components frameworks available.

We keep all dependencies updated to their latest stable versions. Each time we release an updated version you will be notified via the email you used to initially download the template.

To discover all the features that this free React admin template has to offer, we suggest visiting the live preview we’ve set up.

There is also a free Javascript version available, if that is what you prefer working with.

---

Updrade to PRO

The premium version of this template comes with a lot more components, features and options making it a very powerful friend in your development endeavors. You can download a copy of it from 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-nextjs-admin-dashboard.git
3. Install dependencies: Run npm install inside the project folder
4. Start dev server: After the install finishes, run yarn dev. 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-nextjs-admin-dashboard's Issues

How to dockerize?

I can't dockerize this app using the NextJS with-docker example, but it isn't working correctly. The docker container starts up and runs, but the app doesn't load when navigating to the URL. I've tested with a fresh NextJS app and it works fine, so I'm guessing something is set up different in this one that isn't compatible.
The only way I've gotten it to work is to copy the whole project into the image and run it with yarn start. However, this isn't ideal as it copies literally everything in the folder into the image which bloats the size immensely, making it slow to build, slow to upload to our repository, and slow to then download to our hosting environment. The NextJS example does some optimization (using the output: 'standalone' feature) and also only copies the modules that are actually needed which greatly reduces the size of the final image.
Our current method of making a docker image adds 10 minutes to our CICD pipeline just to build and upload the image.

Question about UI rendering when refresh the page.

Hello, I am trying to have single image in a Component in a page (with typescript). If use "<Box component="img" src="/images/sample.png" everything is fine when refresh the page in browser.
If I use the Image from next/image then the image will be missing awhile and come back after complete page refresh.
import Image from 'next/image'; <Image alt="Logo" src="/images/sample.png" />
Same case happens to the MUI components with className of bootstrap class. The styling gone and come back during the page refresh. Can I have your advice with this?