Start a Project
Open index.html for the package welcome page, then copy a dashboard, app page, auth screen, or pages/dashboard-blank.html into your project. No Sass, Node, Gulp, bundler, CDN, or framework runtime is required.
Required Local Assets
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="assets/css/athena.css">
<link rel="stylesheet" href="assets/css/athena-layout.css">
<link rel="stylesheet" href="assets/css/athena-utilities.css">
<script src="assets/js/athena-theme-init.js"></script>JavaScript Entrypoints
Load vendor scripts locally, then Athena entrypoints with defer. Use window.Athena.init(), Athena.theme.set(mode), Athena.sidebar.set(state), Athena.tables.init(selector, options), and Athena.charts.create(canvas, config) where needed.
Sidebar And Component Examples
Sidebar groups use data-athena-nav-section-toggle buttons with matching aria-controls targets, so dashboard, app, component, and resource links can be shown or hidden from their section title. Component pages also load assets/js/athena-docs.js for closed-by-default code accordions and clipboard copy buttons marked with data-athena-copy.
Small Utilities
Use .fs-7 and .fs-8 for compact metadata, helper text, and dense labels. Badge examples include fill variants such as .text-bg-primary and outline variants such as .badge-outline-primary.