# 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
```bash
npm create astro@latest my-app -- --template minimal
cd my-app
npm install @adminkit/core
```
AdminKit 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 `
```
To use the CDN build instead, load `app.css` and `app.js` from `https://unpkg.com/@adminkit/core/dist/` with a `` and an `is:inline` script tag. Pin a version in the CDN URL in production (`@adminkit/core@`).
### Optional: avoid a color mode flash
Without `head.js`, `app.js` applies the stored [color mode](/docs/getting-started/dark-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 `` with `is:inline`, which keeps it a plain, blocking script:
```astro title="src/layouts/Layout.astro"
---
import "@adminkit/core/css";
import headJs from "@adminkit/core/head?url&no-inline";
---
```
## Minimal layout
`app.js` sets up the `js-sidebar`, `js-simplebar` and `js-sidebar-toggle` hooks and the icons as in the HTML template.
```astro title="src/layouts/Layout.astro"
---
import "@adminkit/core/css";
const { title = "Dashboard" } = Astro.props;
const path = Astro.url.pathname;
---
{title}
```
```astro title="src/pages/index.astro"
---
import Layout from "../layouts/Layout.astro";
---
Dashboard
Hello from AdminKit.
```
Add `src/pages/about.astro` the same way for the second link.
## Run
```bash
npm run dev
```
Open 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](https://docs.astro.build/en/guides/view-transitions/) (`` in ``), Astro swaps in the `` of each new page and runs the bundled script only once. `app.js` sets up every swapped-in page by itself.
---
Canonical HTML page: https://adminkit.io/docs/frameworks/astro/
Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/docs/ · Questions: support@adminkit.io