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
npx sv create my-app --template minimal --types ts
cd my-app
npm install @adminkit/coreAdminKit 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.
<script lang="ts">
import '@adminkit/core/css';
import { onMount } from 'svelte';
onMount(() => {
import('@adminkit/core');
});
</script>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 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 <head>, which src/app.html can only load from static/, so copy it there:
cp node_modules/@adminkit/core/dist/js/head.js static/<script src="%sveltekit.assets%/head.js"></script>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).
<script lang="ts">
import '@adminkit/core/css';
import { onMount } from 'svelte';
import { page } from '$app/state';
import type { LayoutProps } from './$types';
let { children }: LayoutProps = $props();
onMount(() => {
import('@adminkit/core');
});
</script>
<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="sidebar-item" class:active={page.url.pathname === '/'}>
<a class="sidebar-link" href="/">
<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Dashboard</span>
</a>
</li>
<li class="sidebar-item" class:active={page.url.pathname === '/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" aria-label="Top bar">
<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">
{@render children()}
</div>
</main>
</div>
</div><h1 class="h3 mb-3">Dashboard</h1>
<div class="card">
<div class="card-body">Hello from AdminKit.</div>
</div>Add src/routes/about/+page.svelte the same way for the second link.
Run
npm run devOpen 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.
Last updated on