A static HTML dashboard UI component library built with Tailwind CSS v4 and Alpine.js v3. Copy components directly into your project — no build step required on the consumer side.
| Tool | Version | Role |
|---|---|---|
| Tailwind CSS | v4 | CSS-first config via @theme {} |
| Alpine.js | v3 | All interactivity, inline in HTML |
| Bun | latest | Package manager + build runner |
| Tabler Icons | latest | Inline SVG icons |
| Select2 | 4.x | Enhanced select dropdowns |
| Flatpickr | 4.x | Date/time picker |
| DataTables | 2.x | Interactive data tables |
git clone https://github.com/zera-app/fexend-html.git
cd fexend-html
bun install
bun run devBun only — do not use npm, yarn, or pnpm.
| Command | Description |
|---|---|
bun run dev |
Watch + compile CSS and JS |
bun run build |
One-time production build (minified) |
bun run format |
Format all HTML/CSS/JS with Prettier |
bun run thumbnails |
Generate page screenshot thumbnails |
Compiled output goes to public/css/app.css and public/js/app.js. Do not edit these directly.
| Component | File |
|---|---|
| Accordion | src/components/accordion.html |
| Alert | src/components/alert.html |
| Avatar | src/components/avatar.html |
| Badge | src/components/badge.html |
| Breadcrumb | src/components/breadcrumb.html |
| Button | src/components/button.html |
| Card | src/components/card.html |
| Collapse | src/components/collapse.html |
| Command Palette | src/components/command-palette.html |
| Data Filter | src/components/data-filter.html |
| Divider | src/components/divider.html |
| Drawer | src/components/drawer.html |
| Dropdown | src/components/dropdown.html |
| File Upload | src/components/file-upload.html |
| Menu List | src/components/menu-list.html |
| Modal | src/components/modal.html |
| Pagination | src/components/pagination.html |
| Popover | src/components/popover.html |
| Stat Card | src/components/stat-card.html |
| Stepper | src/components/stepper.html |
| Tab | src/components/tab.html |
| Table | src/components/table.html |
| Timeline | src/components/timeline.html |
| Toast | src/components/toast.html |
| Tooltip | src/components/tooltip.html |
| Element | File |
|---|---|
| Input | src/elements/input.html |
| Checkbox | src/elements/checkbox.html |
| Radio | src/elements/radio.html |
| Switch | src/elements/switch.html |
| Select2 | src/elements/select2.html |
| Flatpickr | src/elements/flatpickr.html |
| DataTable | src/elements/datatable.html |
| File Upload | src/elements/file-upload.html |
| WYSIWYG | src/elements/wysiwyg.html |
| Page | File |
|---|---|
| Login | src/pages/login.html |
| Register | src/pages/register.html |
| Forgot Password | src/pages/forgot-password.html |
| Reset Password | src/pages/reset-password.html |
| Verify Email | src/pages/verify-email.html |
| Inbox | src/pages/inbox.html |
| Calendar | src/pages/calendar.html |
| Kanban | src/pages/kanban.html |
| Invoice | src/pages/invoice.html |
| Users | src/pages/users.html |
| 404 / 500 / Maintenance | src/pages/errors/ |
src/
├── css/
│ ├── app.css # Tailwind entry + @theme color tokens
│ ├── components/ # UI component CSS (one file per component)
│ ├── forms/ # Form element CSS (opt-in classes only)
│ ├── libs/ # Third-party library theming
│ ├── layouts/ # Navbar, sidebar, layout wrappers
│ └── utilities/ # Base element styles (headings, links, etc.)
├── js/
│ └── app.js # Alpine.js entry point (bundled → public/js/app.js)
├── index.html # Gallery home (Components · Elements · Pages)
├── dashboard.html # Layout boilerplate (copy for new pages)
├── components/ # Full page showcases for each component
├── elements/ # Form element showcase pages
├── pages/ # Auth + app pages
├── dashboard/ # Dashboard variants
├── layouts/ # Layout variants
└── settings/ # Settings pages
public/
├── css/app.css # Compiled output — do not edit
└── js/app.js # Compiled output — do not edit
- Colors — use
@themetokens (text-primary,bg-success,border-danger) — never raw hex - Dark mode — class-based (
.darkon<html>), always includedark:variants - Forms — opt-in classes only:
.input,.label,.select,.checkbox,.radio,.switch— never style bare HTML elements - Icons — Tabler Icons inline SVG,
w-5 h-5,stroke="currentColor" - Interactivity — Alpine.js inline in HTML; no separate JS logic files
See CONTRIBUTING.md for setup, component creation standards, and PR guidelines.