Astro
Use AdminKit in an Astro site with a layout that imports the CSS from @adminkit/core in frontmatter and the JavaScript in a script tag.
Astro renders HTML on the server and ships no framework runtime by default, so AdminKit works as it does on a static page. The layout imports the CSS and the JavaScript through Astro's bundler.
Install
npm create astro@latest my-app -- --template minimal
cd my-app
npm install @adminkit/coreAdminKit PRO is not published to npm. Copy dist/ from the download into src/adminkit/ and import ../adminkit/css/app.css and ../adminkit/js/app.js instead.
Import the CSS and JavaScript
Import the stylesheet in the layout's frontmatter, and the script in a <script> tag at the end of <body>, which Astro bundles and runs once per visit.
---
import "@adminkit/core/css";
---
<!-- at the end of <body> -->
<script>
import "@adminkit/core";
</script>To use the CDN build instead, load app.css and app.js from https://unpkg.com/@adminkit/core/dist/ with a <link> and an is:inline script tag. Pin a version in the CDN URL in production (@adminkit/core@<version>).
Optional: avoid a color mode flash
Without head.js, app.js applies the stored color mode once it runs, so a visitor who picked the mode opposite to their operating system briefly sees the other one. head.js applies it before the first paint. Import its URL with ?url&no-inline (without no-inline, the build inlines the small file as a data: URL) and load it in <head> with is:inline, which keeps it a plain, blocking script:
---
import "@adminkit/core/css";
import headJs from "@adminkit/core/head?url&no-inline";
---
<!-- in <head> -->
<script is:inline src={headJs}></script>Minimal layout
app.js sets up the js-sidebar, js-simplebar and js-sidebar-toggle hooks and the icons as in the HTML template.
---
import "@adminkit/core/css";
const { title = "Dashboard" } = Astro.props;
const path = Astro.url.pathname;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
</head>
<body>
<div class="wrapper">
<nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
<div class="sidebar-content js-simplebar">
<a class="sidebar-brand" href="/"><span class="align-middle">AdminKit</span></a>
<ul class="sidebar-nav">
<li class="sidebar-header">Pages</li>
<li class:list={["sidebar-item", { active: path === "/" }]}>
<a class="sidebar-link" href="/">
<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Dashboard</span>
</a>
</li>
<li class:list={["sidebar-item", { active: path === "/about" }]}>
<a class="sidebar-link" href="/about">
<i class="align-middle" data-lucide="user"></i> <span class="align-middle">About</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<nav class="navbar navbar-expand navbar-light navbar-bg">
<button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
<i class="hamburger align-self-center"></i>
</button>
</nav>
<main class="content">
<div class="container-fluid p-0">
<slot />
</div>
</main>
</div>
</div>
<script>
import "@adminkit/core";
</script>
</body>
</html>---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Dashboard">
<h1 class="h3 mb-3">Dashboard</h1>
<div class="card">
<div class="card-body">Hello from AdminKit.</div>
</div>
</Layout>Add src/pages/about.astro the same way for the second link.
Run
npm run devOpen http://localhost:4321. You should see the dark sidebar with its two icons, the navbar with the hamburger toggle and the card. Clicking the toggle collapses the sidebar.
Notes
- With view transitions (
<ClientRouter />in<head>), Astro swaps in the<body>of each new page and runs the bundled script only once.app.jssets up every swapped-in page by itself.
Last updated on