ReactAdmin dashboard

tokyo-free-white-react-admin-dashboard — React Admin dashboard Template

By bloomui

A free admin dashboard template based on React and TypeScript, using the Material-UI component library, offering a light, clean data interface and common page examples.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Built with React and TypeScript, bootstrapped with create-react-app

02

Uses the Material-UI component framework, including multiple fully customized components

03

Light, clean design and color scheme, with styles implemented via styled-components rather than SCSS

04

Color scheme and style can be adjusted by editing a single variables file

05

Comes with page examples for several common user flows, making it easy to use as a project starting point

06

Free version under the MIT license, allowing modification, commercial use, and distribution

Template Details

Tokyo Free White TypeScript React Admin Dashboard is a free open-source admin template published by BloomUI, aimed at React and TypeScript projects. It is bootstrapped with Facebook's create-react-app and uses Material-UI as the front-end component framework. The template adopts a light, clean design and color scheme, with styles implemented via styled-components rather than SCSS, so the color scheme and style can be adjusted by editing a single variables file. The repository includes multiple fully customized components based on Material-UI and comes with page examples for several common user flows, serving as a starting point for new projects or, with minor modifications, integrating into existing projects.

This repository is a free version under the MIT license, allowing free use, modification, commercial use, and distribution of the code, but when distributing copies or substantial portions of the code, the copyright notice and the full MIT license notice must be retained. Project materials mention a paid PRO version with additional features such as translations, complex user flows, and Redux examples; this listing does not include paid upgrade content. Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses. External services such as domains, hosting, databases, payments, or AI may incur separate charges.

ReactAdmin dashboard

Is it right for your project?

Use Cases

  • Providing starting pages and component foundations for new admin projects
  • Integrating into existing React projects and replacing existing interface styles
  • Serving as a reference project for learning to use React, TypeScript, and Material-UI together
  • Quickly building prototypes of light-style data management interfaces

Suitable For

  • Front-end developers using the React and TypeScript stack
  • Teams needing a free admin template as a project starting point
  • Projects looking to customize interface styles based on Material-UI
  • Users who accept the MIT license terms and need to retain the copyright notice

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Install the latest stable version of Node.js and NPM first

  2. 2

    Clone the repository locally via git clone

  3. 3

    Run npm install in the project directory to install dependencies

  4. 4

    Run npm run start to launch the development server; the browser will open http://localhost:3000 to display the preview

  5. 5

    Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

  • Permits free use, modification, commercial use, and distribution of that version's code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as-is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The README clearly distinguishes the free version from the paid PRO version: additional features such as translations, complex user flows, and Redux examples are only available in the paid Tokyo White TypeScript Dashboard; the free version does not include these features, and they must be purchased separately if needed.
  • Project materials mention optional paid versions or features; this listing only covers the public free code and does not include paid upgrades.
  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses; they cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

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)

Original README
https://github.com/bloomui/tokyo-free-white-react-admin-dashboard/blob/main/LICENSEhttps://github.com/bloomui/tokyo-free-white-react-admin-dashboard/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-09-30. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 76 / 100
Technologies
React
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2024-08-02
Screenshot last checked
2026-09-30

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 5ed3018774418fedb5eb576d96ab10592c0516f4cffbecc0a23f7dbe32d8c412

2026-09-30T09:08:27.903Z

Source file / repository
<p align="center">
    <a href="https://bloomui.com" title="BloomUI.com">
        <img src="https://bloomui.s3.us-east-2.amazonaws.com/tokyo-logo.png" alt="Tokyo Free White Typescript React Admin Dashboard">
    </a>
</p>
<h1 align="center">
    <b>Tokyo Free White Typescript React Admin Dashboard</b>
    <br>
    <a href="https://twitter.com/intent/tweet?url=https://bloomui.com&text=I like this React admin dashboard">
        <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" />
    </a>
</h1>
<div align="center">

![version](https://img.shields.io/badge/version-2.0.0-blue.svg)
![license](https://img.shields.io/badge/license-MIT-blue.svg)

<a href="https://bloomui.com/product/tokyo-free-white-react-typescript-material-ui-admin-dashboard/"><img src="https://bloomui.s3.us-east-2.amazonaws.com/tokyo-free-white-react-typescript-material-ui-admin-dashboard.jpg" /></a>
</div>

<a href="https://bloomui.com/product/tokyo-free-white-react-typescript-material-ui-admin-dashboard/"><h3>Free React Typescript Admin Dashboard Template built with Material-UI</h3></a>
<p>
    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.
</p>
<p>
Tokyo Free White Typescript Dashboard features a nice classic light & clean design and color scheme.
</p>
<p>
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.
</p>
<p>
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.
</p>

---
<h3>Updrade to PRO</h3>

<p>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 <a href="https://bloomui.com">bloomui.com</a></p>

---

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

---

<h2>
    Technical Support
</h2>
<p>
    You can open a support ticket by sending an email here: <a href="mailto:[email protected]" title="Open Support Ticket">
        [email protected]
    </a>
</p>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

ant-design-pro

ant-design-pro

Ant Design Pro is an enterprise-grade React admin scaffold built on React 19, Umi Max 4, and antd 6 with TypeScript.

React · Admin dashboard

coreui-free-react-admin-template

coreui-free-react-admin-template

CoreUI's free React admin template, built on React and the CoreUI component library, provides dashboard layouts, sidebar navigation, routing, and example views. It includes .cursorrules, ARCHITECTURE.md, and DEVELOPMENT.md context files, plus JSDoc comments and PropTypes, to support AI-assisted development.

React · Admin dashboard

fastapi-react

fastapi-react

A Cookiecutter template for FastAPI + React (TypeScript) full-stack projects, integrating PostgreSQL, SQLAlchemy, Alembic, Celery, Redis, JWT authentication, a react-admin admin panel, and a Docker Compose development environment with Nginx reverse proxy.

React · Admin dashboard

react-antd-admin-template

react-antd-admin-template

A React + Ant Design admin template for mid- and back-office products, with built-in login/logout, dynamic routing, permission checks, and user management.

React · Admin dashboard

react-saas-template

react-saas-template

A React and Material-UI template for SaaS or admin websites, offering dashboard, chart, blog, payment, and file upload components. It uses Create-React-App, React-Router, Recharts, React-Stripe-js, React-Dropzone, and React-Cropper, with theme colors centralized in src/theme.js.

React · Admin dashboard

react-material-admin

react-material-admin

React Material Admin is an MIT-licensed React admin template by Flatlogic, built on Material-UI. It provides dashboards, charts, tables, authentication, profile, and notification pages, with three color themes and responsive layouts.

React · Admin dashboard