ArchitectUI is a clean, responsive admin dashboard theme. It is a thin layer on top of Bootstrap 5.3: one stylesheet and one dependency-free script. Bootstrap and the icons come from a CDN, so any markup written for Bootstrap 5 works inside the theme without changes, and you never rebuild Bootstrap.
dist/architectui.css— the theme: layout, components, colors and dark mode in the default Business look, all driven by CSS variables.dist/architectui.js— the theme behavior of the admin pages: collapsible sidebar, settings panel, theme and mode switching, header search, file drop zone, icon rendering.dist/architectui-auth.js— the script of the guest pages (sign in, sign up, errors) instead ofarchitectui.js: mode toggle, icons, form steps with a verification code.dist/themes/*.css— nine optional visual themes loaded on top ofarchitectui.css, including Orange, the original ArchitectUI look.dist/*.html— demo pages: dashboards, elements, every Bootstrap component on one page, a starter page, guest pages (sign in, sign up, password reset, errors), Bootstrap tables and DataTables, components, forms, tables, charts, calendar and maps.- No jQuery, no build step for your app. Icons are Lucide.
Take the files in one of two ways.
From a release. Download the dist archive from Releases,
copy architectui.css, architectui.js (and architectui-auth.js for sign-in pages), themes/ and assets/
to your project, then add to <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="architectui.css">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/lucide@1.58.0/dist/umd/lucide.min.js"></script>
<script defer src="architectui.js"></script>From jsDelivr. Link the files of a release tag straight from this repository. Replace vX.Y.Z with a tag from
Releases; a tag never changes, so the files stay the same:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wnikk/architectui-html-theme@vX.Y.Z/dist/architectui.css">
<script defer src="https://cdn.jsdelivr.net/gh/wnikk/architectui-html-theme@vX.Y.Z/dist/architectui.js"></script>Themes load from the folder next to architectui.css, so the settings panel and data-aui-theme work from the CDN too.
Logos, avatars and other images are part of your markup: copy assets/ or point the src to the same CDN folder.
All links are relative, and every script is a classic defer script. The demo works from any folder of a local
server and from disk (file://). The theme script adds one global, window.ArchitectUI. Call
ArchitectUI.refresh(element) after you insert markup with icons, tooltips or popovers.
Start from dist/pages-starter.html for a page with the frame (header, sidebar, page title, footer) and from
dist/pages-login.html for a page without it.
Write an element with the icon name. The theme script turns it into an inline SVG:
<i data-lucide="rocket"></i>Icons take the text color and scale with the font size. aui-icon-gradient-<color> strokes an icon with a theme gradient.
The Icons demo page lists every icon with search and copy on click.
Replace the files, nothing else:
assets/images/logo.png— logo for light backgrounds;assets/images/logo-on-dark.png— logo for dark backgrounds (dark theme, dark header colors).
Wide and square logos both fit automatically. The maximum height is the --aui-logo-max-height variable (2.25rem).
architectui.css alone draws the default look, Business. Nine more visual themes are optional. A theme is one extra
stylesheet loaded after architectui.css; it changes palette, typography, radii, shadows and table density, not the markup.
| Theme | File | Character |
|---|---|---|
| Business (default) | none, built into architectui.css |
Dense, smaller type, lines instead of shadows |
| Orange | themes/orange.css |
The original ArchitectUI look: orange accents, color gradients, soft shadows |
| Indigo | themes/indigo.css |
Neutral business palette |
| Indigo Photo | themes/indigo-img.css |
Indigo with a subtle photo behind the content |
| Coffee | themes/coffee.css |
Warm browns on neutral surfaces |
| Garden | themes/green.css |
Calm green, serif headings, airy rows for long reading |
| Warm | themes/raspberry.css |
Berry accent, pill buttons, rounder corners |
| Operations | themes/teal.css |
Zebra tables, monospace numbers |
| Space | themes/violet.css |
Large radii, soft violet shadows, heavy headings |
| Cyberpunk | themes/cyberpunk.css |
Neon on black, monospace; dark only |
Pick a theme and a mode (Light, Dark, System) in the settings panel, or toggle light/dark with the header button.
The choice is stored in localStorage and applied before the first paint. To ship a fixed theme without the panel,
add the stylesheet yourself and put the theme id on <html>. The attribute switches the built-in Business values off:
<html data-aui-theme="coffee">
<link rel="stylesheet" href="architectui.css">
<link rel="stylesheet" href="themes/coffee.css">Theme sources live in src/scss/themes/. A new theme is one file: its palette for both modes, other variable values
and the rules only this theme needs. The shared rules of all themes come from _theme.scss and are part of
architectui.css. Add the theme to src/_data/themes.json to list it in the panel.
Layout modes are attributes on <html>. The settings panel (cog button) changes them and remembers the choice in localStorage.
| Attribute | Values | Default |
|---|---|---|
data-aui-header |
fixed, static |
fixed |
data-aui-sidebar |
fixed, static |
fixed |
data-aui-footer |
fixed, static |
static |
data-aui-sidebar-collapsed |
present or absent | absent |
data-aui-tabs |
shadow, line |
shadow |
data-aui-header-scheme, data-aui-sidebar-scheme |
primary, secondary, success, info, warning, danger, light, dark, focus, alternate |
none |
data-aui-mode |
light, dark, system |
light |
data-aui-theme |
theme id from the table above, or none for Business | none |
data-bs-theme |
light, dark — set by the theme script from the mode |
light |
The sidebar is full width from 1200 px, an icon rail from 768 px (it expands on hover or keyboard focus) and an off-canvas panel below 768 px.
All colors are CSS variables. Override them after architectui.css, no rebuild needed:
:root {
--bs-primary: #3f6ad8;
--bs-primary-rgb: 63, 106, 216;
}The theme adds focus, alternate and tertiary to the Bootstrap color set (btn-focus, bg-alternate, text-focus and so on).
llms.txt— short description of the theme and links, in the llms.txt format.llms-full.txt— complete usage reference: page template, frame markup, settings, script API, themes, tokens, component classes.AGENTS.md— short how-to for agents: which files to take, how to build a page, settings, customizing, rules.
Requires Node 22 or newer.
npm install
npm run devnpm run dev serves the demo at http://localhost:8080 and rebuilds pages and styles on change. npm run build writes the release into dist/.
| Path | Purpose |
|---|---|
src/pages/*.html |
Demo pages. Front matter holds the title, description and icon. |
src/pages/*.js |
Scripts of individual pages (charts, calendar, maps, notifications, icons, validation, DataTables). |
src/_includes/ |
Page layouts (base.njk with the admin frame, guest.njk for sign-in and error pages) and partials (Eleventy + Nunjucks). |
src/_data/menu.json |
Sidebar menu. |
src/_data/orders.js |
Demo orders for the table pages. |
src/_data/cdn.json |
Every external URL. Point them to a local vendor/ folder to work offline. |
src/scss/ |
Theme styles. architectui.scss is the entry point. |
src/js/architectui.js |
Theme script of the admin pages. |
src/js/architectui-auth.js |
Script of the guest pages. |
The demo pages are built with Eleventy 3, the styles with Sass. These are the only two dependencies.
The Maps page uses public OpenStreetMap tiles. They are fine for a demo; use your own tile server or a tile provider in production.
MIT, see LICENSE.
Forked from DashboardPack ArchitectUI HTML Theme Free and maintained by the community.