Notifications

3 new
MS

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

EW

Emma Wilson commented on Homepage Redesign

45 minutes ago

JM

James Miller mentioned you in Sprint Planning

2 hours ago

SC

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

DK

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Getting Started

Everything you need to work with the Alpine Admin template.

On this page

Getting Started Tailwind Build Setup Template Overview Color System Layout Options Adding New Pages

Getting Started

Alpine Admin is an admin dashboard template built with Tailwind CSS and Alpine.js. It ships as a collection of static HTML files plus a small PostCSS build pipeline for compiling the CSS and bundling the JavaScript.

Quick Start

# Install dependencies
npm install

# Build the CSS and JS
npm run build

# Open in browser
open sidebar/index.html    # Sidebar layout
open navbar/index.html     # Top navbar layout

Every page is a self-contained HTML file that links the compiled assets/css/styles.css and assets/js/app.js. The JavaScript bundle includes Alpine.js, Chart.js, and Prism, so no CDN is required.

Build Setup

The template compiles Tailwind CSS with PostCSS and bundles the JavaScript with esbuild. Source files live in src/, and the build writes the compiled output into each theme's assets/ directory.

Install & Build

npm install      # install dependencies
npm run build    # compile CSS (light + dark) and JS
npm run watch:css  # watch the light CSS during development

What the pipeline produces

src/css/light.css   -> light/assets/css/styles.css
src/css/dark.css    -> dark/assets/css/styles.css
src/js/app.js       -> dist/js/app.js  (copied to both themes' assets/js/)

The design tokens are defined once in src/css/tokens.css and shared by Tailwind's config and the component styles. Change a token and rebuild to re-theme the whole template.

Template Overview

Directory Structure

alpine/
├── index.html                  # Landing page (theme chooser)
├── src/                        # Source files (design system)
│   ├── css/
│   │   ├── tokens.css          # Design tokens (single source of truth)
│   │   ├── components.css      # Reusable component styles
│   │   ├── light.css           # Light entry point
│   │   └── dark.css            # Dark entry point
│   └── js/
│       └── app.js              # Alpine.js + Chart.js/Prism integration
├── light/                      # Light theme (compiled)
│   ├── index.html
│   ├── sidebar/                # Sidebar layout pages
│   ├── navbar/                 # Top navbar layout pages
│   ├── auth/                   # Authentication pages
│   ├── error/                  # Error pages
│   ├── docs/                   # Documentation + component gallery
│   └── assets/                 # Compiled CSS + JS
├── dark/                       # Dark theme (mirrors light/)
├── package.json                # Build scripts
├── postcss.config.js
└── tailwind.config.js

Key Features

Two Layouts

Sidebar nav and top navbar variants, each with full page parity

Design System

Design tokens in src/css/tokens.css drive Tailwind + component styles

18 UI Components

Alerts, buttons, cards, modals, and more with code examples

Chart.js Charts

Line, bar, and doughnut charts on Dashboard and Analytics

Auth & Error Pages

Sign-in, register, 404, 403, and 500 error pages

Calendar Page

Full month-view calendar with events and navigation

Color System

The template defines custom colors in the Tailwind config. These are available as utility classes like bg-alpine-500, text-green-400, bg-gray-950, etc.

Alpine (Primary Blue)

alpine-50 · #eff6ff
alpine-100 · #dbeafe
alpine-200 · #bfdbfe
alpine-300 · #93c5fd
alpine-400 · #60a5fa
alpine-500 · #3b82f6 ← Primary
alpine-600 · #2d4a6e
alpine-700 · #334155
alpine-800 · #1e293b
alpine-900 · #0f172a ← Sidebar BG

Supplementary Colors

pine · #2d6a4f — Success/Green
sunset · #f97316 — Warning/Orange
snow · #f8fafc — Page Background
peak · #e2e8f0 — Border Color

Standard Tailwind Colors

Red (bg-red-500/10, text-red-500), yellow (bg-yellow-500/10, text-yellow-500), green, blue, purple, gray, etc. are all available as built-in Tailwind colors.

Layout Options

The template provides two layout options to suit different use cases:

Sidebar Layout

Fixed left sidebar navigation (bg-alpine-900 dark background). Contains all navigation links and the user profile. The main content area uses md:ml-64 to shift right on desktop. On mobile, the sidebar becomes an overlay triggered by the hamburger button.

The sidebar can be collapsed on desktop via the collapse button, reducing it to a 4.5rem icon-only bar. This state is persisted in localStorage.

Pages in: sidebar/ directory (14 pages)

Top Navbar Layout

Horizontal top navigation bar (bg-alpine-900) spanning full width. Includes the logo, nav links with dropdowns, search, notification bell, status indicator, and user avatar menu. The main content takes the full page width.

Pages in: navbar/ and docs/ directories (12 pages)

Adding New Pages

The template uses plain HTML files, so adding a page is straightforward. Here is the step-by-step process:

Step 1: Create the file

Copy an existing page (e.g. sidebar/orders.html) and rename it. Update the <title> and page heading.

<title>My Page - Alpine Admin</title>

<h1 class="text-2xl font-bold text-white">My Page</h1>
<p class="text-sm text-gray-400 mt-1">Page description.</p>

Step 2: Add the nav link

In the sidebar <nav> section, add a new anchor tag following the existing pattern. Make sure to set text-white and active class on the link for this page.

<a href="mypage.html"
   class="sidebar-link flex items-center gap-3 px-3 py-2.5
          rounded-lg text-sm font-medium text-white">
  <svg class="w-5 h-5 flex-shrink-0" ...></svg>
  <span class="sidebar-label whitespace-nowrap">My Page</span>
</a>

Step 3: Update all other sidebar pages

Add the same link (without text-white and active) to every other sidebar HTML file so navigation is consistent across the dashboard. Each file must be updated independently — there are no shared layout components.