Skip to content

A free and open-source admin dashboard interface built with Flowbite, React, and Tailwind CSS

License

Notifications You must be signed in to change notification settings

themesberg/flowbite-react-admin-dashboard

Repository files navigation

flowbite-react-admin-dashboard

Get started with a premium admin dashboard layout built with React, Tailwind CSS and Flowbite featuring 21 example pages including charts, kanban board, mailing system, and more.

Flowbite on Discord


You can copy/paste code you want from this project, or use the whole thing for your website.

Table of Contents

How to use in your own project

In this case, we assume you already have a nodejs project with a package.json.

You can copy any of the code from the .tsx files in src/pages to your own nodejs project. Some pages contain optional dependencies discussed further below. Pages might also use some of the static files found in public.

Your project will need to have flowbite-react installed. That's it! If you're unfamiliar, see the open-source guide on how to install flowbite-react.

Optional dependencies include:

How to install

Assumptions

  • You can open a shell/terminal/command prompt
  • You have git instaslled and can run git in the shell
  • You have nodejs installed and can run node, npm in the shell

Install yarn

npm i -g yarn

Clone this repository

git clone https://github.com/themesberg/flowbite-react-admin-dashboard.git
cd flowbite-react-admin-dashboard

Install dependencies for this project

yarn install

How to develop locally

Once run, this command will display a link to the local server.

yarn dev

How to build for production

Your code won't build if you have TypeScript errors. Otherwise, the command will report how large the output files are, which should go to dist folder.

We use vite to build and its default behavior is to emit an index.html, app.js, and app.css.

yarn build

How to deploy

You can deploy this repository to any hosting service from Cloudflare Pages, Vercel, or Github Pages to Heroku to AWS to your own Nginx server.

However, react-router needs your server to send all requests to /. This is commonly referred to as a Single Page Application (SPA). You will have to add a rewrite to accomplish that. To host on Vercel, for example, you just need to add a vercel.json with:

{
  "routes": [
    {
      "src": "/[^.]+",
      "dest": "/",
      "status": 200
    }
  ]
}

Most, but not all, providers have a mechanism to do this, but we can't cover them all here.

Alternatively, you can change this app to server-side render. vite isn't designed to do that, so you'll need to use a plugin to create an HTML file for each page. vite has a section in their docs about SSR plugins and they seem great.

About

A free and open-source admin dashboard interface built with Flowbite, React, and Tailwind CSS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages