# SvelteKit Use AdminKit in a SvelteKit app, import the CSS from @adminkit/core in the root layout and the JavaScript in onMount, after hydration. SvelteKit renders pages on the server and hydrates them in the browser. The root layout imports the AdminKit stylesheet, and the script once the page has hydrated. ## Install ```bash npx sv create my-app --template minimal --types ts cd my-app npm install @adminkit/core ``` AdminKit PRO is not published to npm. Copy `dist/` from the download into `src/lib/adminkit/` and import `$lib/adminkit/css/app.css` and `$lib/adminkit/js/app.js` instead. ## Import the CSS and JavaScript Import the stylesheet at the top of `src/routes/+layout.svelte` (shown in full below), and the script in `onMount`. `app.js` changes the server-rendered markup (it renders the icons and wraps the sidebar in its scrollbar), so it has to run after Svelte has hydrated that markup. ```svelte title="src/routes/+layout.svelte" ``` The package ships TypeScript declarations for both imports and for the globals `app.js` adds, such as `window.adminkit`. ### 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. It has to be a plain, blocking script in ``, which `src/app.html` can only load from `static/`, so copy it there: ```bash cp node_modules/@adminkit/core/dist/js/head.js static/ ``` ```html title="src/app.html" ``` ## Minimal layout `app.js` sets up icons, the sidebar toggle and the SimpleBar scrollbar in markup that Svelte renders later, also after each navigation, so the layout is plain markup with the `js-sidebar`, `js-simplebar` and `js-sidebar-toggle` classes. From the `lg` breakpoint the toggle collapses the sidebar; below it, the sidebar is a Bootstrap offcanvas sheet (`offcanvas-lg` on `#sidebar`). ```svelte title="src/routes/+layout.svelte"
{@render children()}
``` ```svelte title="src/routes/+page.svelte"

Dashboard

Hello from AdminKit.
``` Add `src/routes/about/+page.svelte` the same way for the second link. ## Run ```bash npm run dev ``` Open http://localhost:5173. You should see the dark sidebar with its two icons, the navbar with the hamburger toggle and the card. Clicking **About** navigates client-side; the icons stay rendered and the active item moves. In a window narrower than 992px the sidebar is hidden, and the toggle opens it as a sheet over the page; Escape, the backdrop or a link closes it. --- Canonical HTML page: https://adminkit.io/docs/frameworks/sveltekit/ 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