ArchitectUI Angular

ArchitectUI Angular is a free, MIT-licensed admin dashboard template for Angular 22 that provides a working foundation for SaaS platforms, back-office panels, and internal tools. It ships with Bootstrap 5.3.8 pulled directly from npm, Chart.js v4 charts, NgRx theme state, and a zoneless signal-based UI layer, and it is maintained by the DashboardPack team.

What is ArchitectUI Angular?

ArchitectUI Angular is a ready-to-run Angular 22 admin dashboard starter that takes no configuration input beyond npm install and ng serve, and produces a responsive dashboard application with a header/sidebar/footer layout, analytics widgets, and prebuilt demo pages. It runs on Node.js (versions 20.19, 22.12, or 24+) and Angular CLI 21+, is built with Vite plus esbuild through @angular/build, and is published by the DashboardPack team under the MIT License.

Key Features

• Angular 22 zoneless runtime — the app runs without zone.js, cutting polyfill size from 91 KB to 1.6 KB, with UI state managed through Angular signals and viewChild() queries.
• Bootstrap 5.3.8 from npm — styling comes from the npm package with theme variable overrides rather than a vendored SCSS copy, so upgrades are a version bump.
• Chart.js v4 with ng2-charts v10 — line, bar, pie, doughnut, radar, and polar area chart types are wired into the demo pages.
• NgRx state management — theme configuration is held in a centralized, type-safe store, installed via legacy-peer-deps until Angular 22 builds ship.
• Font Awesome 7 — icons load from @fortawesome/fontawesome-free@7 with no v4 compatibility shim.
• Toolchain — TypeScript 6.0, ESLint 10 flat config via eslint.config.js, Vite plus esbuild builds, and a clean npm audit reporting zero vulnerabilities.
• Included pages — dashboard analytics, UI elements (buttons, cards, dropdowns, timeline), components (tabs, accordions, modals, pagination, tooltips), forms, data tables, chart pages, login/register/password-recovery pages, and a lazy-loaded /docs section.
• Deployment helpers — npm run build:prod sets base href to /architectui-angular-free/ and bundles an .htaccess for Apache; an Nginx try_files snippet is documented for direct-URL routing.

Who is it for?

• Angular developers starting an internal tool — clone the repo and have a themed shell with routing, layout, and theme toggling in place instead of scaffolding from ng new.
• Teams evaluating dashboards before buying — the free version demonstrates the component set before upgrading to ArchitectUI Angular Pro.
• Developers learning modern Angular patterns — the codebase shows zoneless signals, NgRx store setup, and flat-config ESLint in a working app.

Use cases

• SaaS back-office panels: use the analytics dashboard, data tables, and user pages as the admin layer of a web app.
• Prototype demos: deploy the built dist/architectui-angular-free/browser/ output to a subdirectory for client previews.
• Component reference: browse the /docs section and demo pages for working examples of modals, accordions, tooltips, and chart configurations.

How does ArchitectUI Angular work?

Clone the repository, run npm install, then ng serve to open the app at http://localhost:4200. For release, npm run build:prod emits production-optimized assets with the correct base href, which you upload to your server subdirectory along with the bundled .htaccess.

FAQ

Is ArchitectUI Angular free?

Yes. The template is released under the MIT License, so you can use it in commercial projects. A separate ArchitectUI Angular Pro version from DashboardPack adds advanced components and premium support.

What Angular version does it use?

Release 3.4.0 runs on Angular 22.0.0 and TypeScript 6.0, upgraded through the ng update 21 to 22 migrations. @ng-bootstrap and @ngrx are not yet published for Angular 22 and install via legacy-peer-deps.

Does it support static deployment to a subfolder?

Yes. npm run build:prod builds to dist/architectui-angular-free/ with a matching base href, and the included .htaccess redirects deep links such as the analytics dashboard back to index.html so Angular routing works.