bootstrap-admin-react — React 后台模板

SHA-256: 2ed72d757432a89bb8e54197a1223e6a3b797cf396586023ef22696fa3c1a743

2026-10-01T01:37:53.099Z

# Bootstrap Admin / React

[Leia em português](./README.pt-BR.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) ![Free](https://img.shields.io/badge/price-free-brightgreen)

Bootstrap Admin / React is the React implementation of the Bootstrap admin layout: 5 sibling templates share the same 25 screens and the same visual identity, one per stack. This one is built with React 19 and hooks, styled with Bootstrap 5.3 compiled from Sass. Authentication and data are mocked, so the whole application runs without a backend. It ships with a light and a dark theme, three languages and an installable PWA setup.

Live preview: https://template.dev.br/preview/bootstrap-admin-react/

## Pages included

25 route pages in `src/pages/`:

- Landing: public marketing page with hero, feature and pricing sections
- Login: sign-in form with validation and mock credentials
- Register: account creation form
- ForgotPassword: request form for a reset link
- ResetPassword: form to set a new password
- Dashboard: KPI stat cards with sparklines, charts and recent activity
- Charts: analytics page with bar, area and donut charts (ApexCharts)
- Forms: inputs, selects, date picker, file upload and inline validation
- Tables: data table with sorting, filtering, pagination and row selection
- Components: catalog of the base UI components
- UiAdvanced: modals, tabs, toasts and other composite widgets
- Typography: type scale, headings and text helpers
- Integrations: third-party service cards with toggles
- Profile: user page with personal data and activity
- Pricing: plan comparison
- Settings: application preferences, theme and language
- Inbox: mail-style app screen with folders and message list
- FileManager: file listing with folders and file actions
- Gallery: image grid
- Invoice: printable invoice detail
- Billing: payment methods and invoice history
- Documentation: in-app reference page for the template
- Maintenance: standalone downtime page
- ComingSoon: standalone pre-launch page
- NotFound: 404 error page

## Tech stack

- React 19 with react-dom 19 and TypeScript 5.7 (strict)
- Bootstrap 5.3 compiled from Sass
- Vite 6 with `vite-plugin-pwa` 1.3 (installable PWA, offline cache)
- React Router 7.1 (react-router-dom)
- Zustand 5.0 for state (auth, menu, ui stores)
- i18next 26 + react-i18next 17 + browser language detector (en, es, pt-BR)
- ApexCharts 5 via react-apexcharts 2.1
- TanStack React Table 8.21
- Slate 0.124 rich text editor (slate-react, slate-history)
- Formik 2.4 + Yup 1.7 form validation
- react-datepicker 9 and react-dropzone 15

## Requirements

- Node.js 18 or newer
- npm

## Getting started

```bash
npm install
npm run dev
```

Vite starts a dev server with hot reload. Authentication is simulated in the Zustand auth store, so no backend is needed. Demo credentials:

- `[email protected]` / `admin123`
- `[email protected]` / `user123`

## Build for production

```bash
npm run build
```

Runs the TypeScript check and writes the production bundle to `dist/`. Preview it locally with `npm run preview`.

## Project structure

```
src/
├── assets/styles/     app.scss, _compat.scss
├── components/
│   ├── landing/       sections of the public landing page
│   ├── layout/        header, sidebar, footer
│   └── ui/            shared UI components
├── hooks/             shared React hooks
├── i18n/locales/      en.json, es.json, pt-BR.json
├── pages/             25 route pages
└── stores/            auth.ts, menu.ts, ui.ts (Zustand)
```

## Theming and customization

`src/assets/styles/app.scss` overrides the Bootstrap Sass variables before `@import "bootstrap/scss/bootstrap"`: `$primary` (#465fff), the state colors, `$font-family-sans-serif` (Outfit), the radius scale and `$enable-shadows: false`. Below that sit the runtime design tokens, declared as CSS custom properties: the brand ramp (`--color-brand-25` through `--color-brand-950`, with 500 as the primary #465fff), the state colors, and semantic surface tokens under the `--tx-` prefix (sidebar, header, card, border, text). Dark mode swaps the `--tx-` values at runtime, driven by a class on the root element. To rebrand the template, change the brand ramp and the `--tx-` values together. `_compat.scss` implements the utility vocabulary the markup shares with the Tailwind original and maps the tokens onto the framework components, so cards, tables and form controls follow the theme. Changing `$primary` recompiles the framework components; changing the brand ramp updates everything driven by tokens, so keep the two in sync.

## Internationalization

Three locales ship with the template: English, Spanish and Brazilian Portuguese. The browser language is detected on first load and the header switcher persists the user choice.

## The same layout in other stacks

This repository is one of 5 implementations of the same Bootstrap admin layout. Every one has the same 25 views and the same visual identity, and all of them are free:

- Vue 3: https://github.com/danilo62x/bootstrap-admin-vue3
- Angular 19: https://github.com/danilo62x/bootstrap-admin-angular
- Laravel 11 + Blade: https://github.com/danilo62x/bootstrap-admin-laravel
- Static HTML: https://github.com/danilo62x/bootstrap-admin-html

The full catalog of free and paid templates is at https://template.dev.br

## Support this project

This template is free and MIT licensed. If it saves you time, you can support the work with a donation at https://template.dev.br/doar?template=bootstrap-admin-react

## License

[MIT](./LICENSE), copyright 2026 Danilo Quinelato.