Dashboard Template

An application template with sidebar navigation, stats row, activity feed, and data table. Perfect for admin panels and analytics dashboards.

Preview

Open in New Tab →

Structure

Sidebar — Logo, nav groups, user profile (hidden on mobile)
Header — Page title, mobile menu button, theme toggle, notifications
Stats Row — 4-column grid of ip-frame stat cards
Main Grid — Chart area, activity feed, data table
Activity Feed — ip-window with ip-list-item entries
Data Table — ip-table with pagination

Key Patterns

Sidebar Layout

<div class="flex min-h-screen">
    <aside class="hidden lg:flex w-56 shrink-0 border-r border-secondary flex-col">
        <!-- Sidebar content -->
    </aside>
    <div class="flex-1 flex flex-col">
        <!-- Main content -->
    </div>
</div>

Stats Row

<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="ip-frame">
        <div class="ip-frame-header">Metric</div>
        <div class="ip-frame-body">
            <div class="ip-stat">
                <div class="ip-stat-value">12,847</div>
                <div class="ip-stat-trend ip-stat-trend-up">↑ 12.5%</div>
            </div>
        </div>
    </div>
</div>

Patterns Used

This template uses the following patterns from the Layouts & Patterns documentation:

Sidebar Layout — Fixed navigation sidebar with main content area
Stats Row — 4-column ip-frame grid for key metrics
Dashboard Grid — Mixed-size panels with chart area and activity feed
Activity Feed — Scrollable ip-window with ip-list-item entries

Theme Switcher

This template includes the theme switcher component for real-time theme, font, and mode changes. Theme preferences persist across page navigations via localStorage.

<!-- Include theme switcher in head -->
<link rel="stylesheet" href="/path/to/themes/planetary.css" id="theme-css">
<link rel="stylesheet" href="/path/to/fonts/terminal.css" id="font-css">
<script src="/path/to/theme.js"></script>
<script src="/path/to/theme-switcher.js" data-theme-base="/path/to/css"></script>

<!-- Add container in header -->
<div id="theme-switcher-container"></div>

<!-- Initialize on DOMContentLoaded -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    themeSwitcher.createSwitcher('#theme-switcher-container');
});
</script>

Source Code

dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard — Interplanetary UI</title>
    
    <!-- Core CSS (with Tailwind utilities) -->
    <link rel="stylesheet" href="./css/styles.css">
    <!-- Theme and Font (dynamically switched by theme-switcher.js) -->
    <link rel="stylesheet" href="../interplanetary-ui/css/themes/planetary.css" id="theme-css">
    <link rel="stylesheet" href="../interplanetary-ui/css/fonts/terminal.css" id="font-css">
    
    <!-- Theme JS -->
    <script src="../interplanetary-ui/js/theme.js"></script>
    <script src="../interplanetary-ui/js/theme-switcher.js" data-theme-base="../interplanetary-ui/css"></script>
</head>
<body class="bg-primary text-secondary font-body text-xs min-h-screen">
    
    <div class="flex min-h-screen">
        
        <!-- Sidebar -->
        <aside class="hidden lg:flex w-56 shrink-0 border-r border-secondary flex-col">
            <div class="p-4 border-b border-secondary">
                <a href="#" class="font-display text-sm text-accent uppercase">Dashboard</a>
            </div>
            <nav class="flex-1 p-3 space-y-4 overflow-y-auto">
                <div class="ip-nav-group">
                    <div class="ip-nav-group-label">Main</div>
                    <div class="ip-nav-list-vertical">
                        <a href="#" class="active">Overview</a>
                        <a href="#">Analytics</a>
                        <a href="#">Reports</a>
                    </div>
                </div>
            </nav>
            <div class="p-3 border-t border-secondary">
                <div class="ip-list-item">
                    <div class="ip-list-item-icon">
                        <div class="ip-avatar ip-avatar-sm">JD</div>
                    </div>
                    <div class="ip-list-item-content">
                        <div class="ip-list-item-title">John Doe</div>
                        <div class="ip-list-item-meta">Admin</div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main -->
        <div class="flex-1 flex flex-col min-h-screen">
            
            <!-- Header -->
            <header class="border-b border-secondary px-4 py-3">
                <div class="flex items-center justify-between">
                    <h1 class="font-display text-sm text-accent uppercase">Overview</h1>
                    <button onclick="themeManager.toggle()" class="ip-btn-icon">
                        <span class="ip-btn-icon-content">◐</span>
                    </button>
                </div>
            </header>

            <!-- Content -->
            <main class="flex-1 p-4 lg:p-6 overflow-y-auto">
                
                <!-- Stats Row -->
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="ip-frame">
                        <div class="ip-frame-header">Users</div>
                        <div class="ip-frame-body">
                            <div class="ip-stat">
                                <div class="ip-stat-value">12,847</div>
                                <div class="ip-stat-trend ip-stat-trend-up">↑ 12.5%</div>
                            </div>
                        </div>
                    </div>
                    <!-- More stats... -->
                </div>

                <!-- Main Grid -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <div class="lg:col-span-2 ip-window">
                        <div class="ip-window-header">Activity</div>
                        <div class="ip-window-body">
                            <!-- Chart placeholder -->
                        </div>
                    </div>
                    <div class="ip-window ip-scrollable">
                        <div class="ip-window-header">Recent Activity</div>
                        <div class="ip-window-body max-h-64">
                            <!-- Activity items -->
                        </div>
                    </div>
                </div>

            </main>
        </div>
    </div>

    <script src="../interplanetary-ui/js/window.js"></script>

</body>
</html>

← Landing Page Documentation →