ArchitectUI React Free

ArchitectUI React Free is a free, MIT-licensed admin dashboard template built on React 19, Bootstrap 5.3, and Vite 8, maintained by DashboardPack. It gives developers a working dashboard shell — layout, sidebar, header, footer, routing, theming, and around 30 UI component demos — that can be run locally or stripped down into a starter for a new web app.

What is ArchitectUI React Free?

ArchitectUI React Free is an open-source React admin dashboard template that pairs React 19 with Bootstrap 5.3 and ships prebuilt layouts, components, and demo pages. It takes the form of a Git repository you clone and run with npm; the output is a single-page React application built by Vite into a build/ folder for deployment. The template is developed by DashboardPack.com and released under the MIT License, with a paid PRO version available separately.

Key Features

• React 19 + Vite 8 stack — React 19.3 with Vite 8 dev server (default port 3001), instant HMR, route-based code splitting, and tree shaking; production builds serve on port 4173 via npm run preview.
• Bootstrap 5.3.8 styling — Bootstrap utilities plus Reactstrap 9.2.3 components, with Sass/SCSS theming driven by variables in src/assets/themes/[theme-name]/_variables.scss across 9 pre-built color schemes.
• Charts on Chart.js 4.5 — Every chart was rebuilt on Chart.js (MIT) through react-chartjs-2, with zooming via chartjs-plugin-zoom; Recharts 3.10 is used on some dashboards, and a shared src/config/chartTheme.js ties chart colors to Bootstrap CSS variables and the dark-mode switch.
• Five dashboard layouts — Analytics, CRM, Commerce, Sales, and Minimal dashboards, plus demo pages for Components, Forms, and Tables in src/DemoPages/.
• Advanced form elements — Date pickers, file uploads (react-dropzone 20), masked inputs, number inputs, React Select, and a WYSIWYG editor (react-simple-wysiwyg).
• Maps without API keys — Leaflet 1.9 / OpenStreetMap and react-simple-maps 3.0 vector maps.
• Dark mode via Bootstrap 5.3 — data-bs-theme switching with Auto, Light, and Dark options; preferences persist to localStorage through src/config/persistThemeOptions.js.
• Testing and CI included — Vitest 4 unit tests, a Playwright 1.59 end-to-end suite that walks 24 demo routes, ESLint 9 flat config, Prettier 3, and a GitHub Actions pipeline.

Who is it for?

• React developers starting an admin panel: clone the repo and use the existing dashboard shell, routing, and Redux Toolkit state instead of wiring layout and theming from scratch.
• Teams needing a Bootstrap-based internal tool UI: 30+ ready components (tables, modals, forms, charts) can be assembled into a custom back office without a design system build-out.
• Developers deploying under a subdirectory: the VITE_BASE environment variable sets the public base path for builds served from paths like /architectui/.
• Learners evaluating an admin template: the full source, changelog, and STARTER.md guide make the structure inspectable before committing to the PRO version.

What can you do with ArchitectUI React Free?

• Launch a dashboard prototype: modify one of the five built-in dashboards and connect its charts and tables to real data via Redux Toolkit.
• Build a starter skeleton: run rm -rf src/DemoPages/ and follow STARTER.md to keep only the shell plus reliability features like the ErrorBoundary.
• Add data visualizations: reuse chartTheme.js helpers (chartColors(), verticalGradient(), sparklineOptions(), gauge and donut plugins) for consistent charts.
• Test and ship through CI: the included GitHub Actions workflow runs lint, Vitest, build, and Playwright against every push and pull request.

How does ArchitectUI React Free work?

Clone the repository, run npm install --legacy-peer-deps (Node.js 22+ is required as of version 4.8.0), then npm start to open the dev server at http://localhost:3001. Customize theme colors in the Sass variables, layout behavior in src/reducers/ThemeOptions.jsx, and new components following the structure in src/DemoPages/Components/. Build with npm run build and preview with npm run preview.