# ArchitectUI React Bootstrap Admin Dashboard Template (FREE) **React 19 Compatible** - A modern, responsive admin dashboard template built with React 19, Bootstrap 5, and comprehensive component library. [![ArchitectUI Bootstrap 5 ReactJS Theme FREE](.github/preview.webp)](https://demo.dashboardpack.com/architectui-react-free/) [**View Live Demo**](https://demo.dashboardpack.com/architectui-react-free/) ## Overview ArchitectUI React is a feature-rich, free admin dashboard template designed for modern web applications. Built with the latest React 19 and Bootstrap 5, it provides a solid foundation for creating professional admin panels, dashboards, and web applications. This template offers clean, responsive design with a comprehensive set of UI components, charts, forms, and layout options. Perfect for startups, enterprises, and developers looking for a production-ready admin dashboard solution. ## What's New in 4.9.2 A small polish release for the React header and upgrade CTA — see [Changelog.md](Changelog.md) for the full detail. - **Header user dropdown**: removed the tiny inner scrollbar from the account activity menu so the dropdown sizes naturally. - **Sidebar upgrade badge**: changed the label from `PRO` to `HOT`, moved it to the danger color, and added more spacing from the menu text. ## Previous Release: 4.9.1 A maintenance refresh for the 2026 template line — see [Changelog.md](Changelog.md) for the full detail. - **Security clean-up**: `npm audit` is back to 0 vulnerabilities. The lockfile now carries the latest safe transitive fixes for `undici`, `js-yaml`, `@vitest/mocker`, `baseline-browser-mapping`, `browserslist`, `nanoid`, `source-map-js`, and related tooling packages. - **Dependencies refreshed**: React 19.3, React Router 8.4, Vite 8.3, Playwright 1.64, Sass 1.105, jsdom 30.1, Redux Toolkit 2.13 and other current in-range releases. - **Removed dead install hook**: the unused `patch-package` postinstall step and stale direct Babel dependencies are gone, which keeps fresh installs quieter and removes the last audit issue. - **Sidebar polish**: upgrade badges now collapse cleanly in desktop icon-only mode and reappear when the sidebar is hovered open. - **Visual consistency**: cards and the application background now use the softer 2026 treatment from the HTML refresh — lighter borders, calmer shadows, and a cleaner dashboard canvas. ## Previous Release: 4.9.0 A charts release — see [Changelog.md](Changelog.md) for the full detail. - **Charts are now Chart.js 4.5 (MIT).** The previous chart library moved to a proprietary licence that does not allow redistribution in templates, so every one of its charts was rebuilt with Chart.js through `react-chartjs-2`; zooming uses `chartjs-plugin-zoom`. All three are MIT-licensed. See [Charts](#charts). - **Chart.js Advanced page** (`#/charts/chartjs-advanced`) replaces the old advanced-charts page with the same examples; the old URL redirects there. The Minimal dashboards are rebuilt on Chart.js too. - **One shared chart theme** (`src/config/chartTheme.js`): charts take their font and colours from the Bootstrap CSS variables and follow the dark-mode switch. - **~216 kB less gzipped JavaScript** (1,344 kB → 1,128 kB). - **Fixed**: `npm ci` works again (a lockfile entry was missing its version), and the Minimal dashboards no longer log a reactstrap `bsSize` console error. ## Previous Release: 4.8.0 - **5 high-severity `npm audit` vulnerabilities → 0**, including the **PostCSS path traversal** advisory ([GHSA-r28c-9q8g-f849](https://github.com/advisories/GHSA-r28c-9q8g-f849)). - **`react-router-dom` → `react-router` 8.3.0** — a pure import swap. ⚠️ In custom pages, change `from 'react-router-dom'` to `from 'react-router'`. - **Now requires Node.js 22+**; `react-dropzone` 20, React 19.2.8, Vite 8.2 and the rest of the stack on latest. ## Key Features ### Core Technologies - **React 19.3** - Latest React with improved performance and features - **Vite 8** - Lightning-fast build tool with instant HMR - **Vitest 4** - First-party test runner with React Testing Library - **Bootstrap 5.3.8** - Modern CSS framework with utilities - **Redux Toolkit** - State management - **React Router v8.4** - Navigation and routing - **Sass/SCSS** - Advanced styling capabilities ### UI Components - **30+ Ready-to-use Components** - Forms, tables, charts, modals, and more - **Multiple Dashboard Layouts** - Analytics, CRM, Commerce, Sales, and Minimal - **Advanced Form Elements** - Date pickers, file uploads, text editors, sliders - **Data Visualization** - Chart.js (MIT) and Recharts integration - **Interactive Maps** - Leaflet/OpenStreetMap and Vector Maps (no API key required) - **Responsive Design** - Mobile-first approach with all device compatibility ### Layout Options - **Flexible Sidebar** - Collapsible with custom themes - **Header Variations** - Multiple header styles and configurations - **Footer Components** - Fixed and dynamic footer options - **Theme Customization** - 9 pre-built color schemes - **Dark Mode Support** - Professional dark theme option ## Quick Start ### Prerequisites - **Node.js** (LTS version) - [Download here](https://nodejs.org/en/download/) - **npm** or **yarn** package manager ### Installation 1. **Clone or Download** the repository ```bash git clone https://github.com/DashboardPack/architectui-react-theme-free.git cd architectui-react-theme-free ``` 2. **Install Dependencies** ```bash npm install --legacy-peer-deps ``` 3. **Start Development Server** ```bash npm start ``` The application will open in your browser at `http://localhost:3001` ### Build for Production 1. **Create Production Build** ```bash npm run build ``` 2. **Preview Production Build** ```bash npm run preview ``` View the production build at `http://localhost:4173` ## Project Structure ```text architectui-react-theme-free/ ├── .github/workflows/ # GitHub Actions CI workflow ├── public/ # Static files ├── src/ │ ├── assets/ # SCSS entry, images, themes │ ├── components/ # Reusable UI components │ ├── config/ # Redux store configuration │ ├── DemoPages/ # Demo pages and examples (lazy-loaded) │ │ ├── Dashboards/ # Dashboard variations │ │ ├── Components/ # UI component examples │ │ ├── Forms/ # Form examples │ │ └── Tables/ # Table examples │ ├── Layout/ # Layout components │ │ ├── AppHeader/ # Header components │ │ ├── AppSidebar/ # Sidebar components │ │ └── AppFooter/ # Footer components │ ├── reducers/ # Redux slices (ThemeOptions) │ └── utils/ # Small shared helpers ├── .env.example # Documented VITE_* env vars ├── vite.config.js # Vite configuration (env-driven) ├── vitest.config.js # Vitest configuration ├── vitest.setup.js # Shared test setup ├── eslint.config.js # ESLint flat config └── package.json # Dependencies and scripts ``` ## Available Scripts | Command | Description | | --------------------------- | ------------------------------------------------------- | | `npm start` / `npm run dev` | Start the Vite dev server (default port 3001) | | `npm run build` | Create production build in `build/` | | `npm run build:analyze` | Build and open the Rollup bundle visualizer | | `npm run preview` | Preview the production build locally (port 4173) | | `npm run lint` | Run ESLint | | `npm run lint:fix` | Run ESLint and auto-fix what it can | | `npm run format` | Run Prettier in write mode | | `npm run format:check` | Run Prettier in check-only mode | | `npm test` | Run Vitest in watch mode | | `npm test -- --run` | Run the test suite once (same mode CI uses) | | `npm run test:ui` | Open the Vitest UI | | `npm run test:coverage` | Run the suite once with v8 coverage reporting | | `npm run test:e2e` | Run the Playwright route smoke test against the preview | | `npm run test:e2e:install` | One-off: install the Chromium browser Playwright uses | ## Environment Variables Copy [.env.example](.env.example) to `.env.local` and adjust as needed. Only `VITE_`-prefixed keys are exposed to the browser bundle. | Key | Default | Effect | | ----------- | ------- | -------------------------------------------------------------------------------------------------------------- | | `VITE_PORT` | `3001` | Dev server port | | `VITE_BASE` | `./` | Public base path used by the production build (set to e.g. `"/architectui/"` when deploying to a subdirectory) | ## Testing Two layers of tests: **Unit / component (Vitest + React Testing Library)** — tests live next to the code as `*.test.jsx`: ```bash npm test # watch mode npm test -- --run # single run npm run test:coverage # v8 coverage report under coverage/ ``` Shared setup (matchers, RTL cleanup, `matchMedia` / `ResizeObserver` / `localStorage` shims) is in [vitest.setup.js](vitest.setup.js); config is in [vitest.config.js](vitest.config.js). **End-to-end (Playwright)** — [e2e/routes.spec.js](e2e/routes.spec.js) spins up `npm run preview` and walks 24 demo routes, failing on any uncaught page error or "Element type is invalid" / "not a constructor" console error. First run needs the browser installed: ```bash npm run test:e2e:install # once npm run test:e2e # run the suite ``` Config in [playwright.config.js](playwright.config.js). ## Reliability Features - **Top-level ``** ([src/components/ErrorBoundary.jsx](src/components/ErrorBoundary.jsx)) catches any render-time crash in the demo pages and shows a friendly card with the error message, component stack (dev only), and a reload button instead of blanking the screen. - **Theme preferences persist to `localStorage`** ([src/config/persistThemeOptions.js](src/config/persistThemeOptions.js)). Color scheme, fixed-header / fixed-sidebar / fixed-footer toggles, background image, dark-mode choice, and the page-title options all survive refresh. A whitelist controls what gets written so non-persisted UI state stays in memory. - **Dark mode** via Bootstrap 5.3's `data-bs-theme`. Auto (follows `prefers-color-scheme`), Light, or Dark — picked from the ThemeOptions side panel and persisted. [`src/hooks/useDarkModeSync.js`](src/hooks/useDarkModeSync.js) keeps `` in sync and re-reacts to OS changes when the user leaves the pref on Auto. - **Accessibility basics** — skip-to-content link, `
` / `