SvelteKit

This guide will help you scaffold a basic Skeleton-powered app within SvelteKit.

Documentation

Getting Started

To begin, let's make a couple quick modifications to our app. Doing this ensures our layout will display properly.

Update App.html

Open /src/app.html and add the following classes to the wrapping div in /src/app.html. This element is required and display: content should remain.

html 
<body>
	<div style="display: content" class="h-full overflow-hidden">%sveltekit.body%</div>
</body>

Note that you can optionally enable Dark Mode for your app by adding .dark to the HTML element at the top of app.html.

html 
<html lang="en" class="dark">

Global Stylesheet

Open your global stylesheet in /src/app.postcss. Remove the @tailwind directives and replace the contents of the file with the following.

css 
html, body { @apply h-full overflow-hidden; }

Layout Setup

Our page needs a bit of structure, so let's implement the Skeleton App Shell component. Add the following markup to your root layout in /src/routes/+layout.svelte.

html 
<script>
	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
	import '@skeletonlabs/skeleton/styles/all.css';
	import '../app.postcss';

	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
</script>

<AppShell>
	<!-- Header -->
	<svelte:fragment slot="header">(header)</svelte:fragment>
	<!-- Sidebar -->
	<svelte:fragment slot="sidebarLeft">(sidebar)</svelte:fragment>
	<!-- Page Content Slot -->
	<slot />
</AppShell>

Add the App Bar

Next, let's add a header element using Skeleton's App Bar component. Replace "Skeleton" with your application name and customize the GitHub link as desired.

html 
<svelte:fragment slot="header">
	<!-- Insert the App Bar: -->
	<AppBar>
		<svelte:fragment slot="lead">
			<h1>Skeleton</h1>
		</svelte:fragment>
		<svelte:fragment slot="trail">
			<a class="btn btn-sm" href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a>
		</svelte:fragment>
	</AppBar>
	<!-- --- -->
</svelte:fragment>

Add Sidebar Navigation

Let's customize our App Shell's sidebar slot to make it stand out a bit more. Add the following Tailwind utility classes to the slotSidebarLeft prop.

html 
<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">

After that, let's implement a Tailwind Elements navigation list within the App Shell's left sidebar slot.

html 
<svelte:fragment slot="sidebarLeft">
	<!-- Insert the list: -->
	<nav class="list-nav">
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/about">About</a></li>
		</ul>
	</nav>
	<!-- --- -->
</svelte:fragment>

Page Setup

Now let's add some basic content to our homepage. Open /src/routes/+page.svelte and replace the contents with the following. This will provide multiple "Tailwind Elements" styled by the all.css stylesheets.

html 
<div class="container mx-auto p-8 space-y-8">
	<h1>Hello Skeleton</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	<hr />
	<section class="card p-4">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	</section>
	<hr />
	<section class="flex space-x-2">
		<a class="btn btn-filled-primary" href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">SvelteKit</a>
		<a class="btn btn-filled-accent" href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind</a>
		<a class="btn btn-filled-tertiary" href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a>
	</section>
</div>

Add a Component

Finally let's implement Skeleton's Gradient Heading component. Import the component and replace the H1 heading on the page with the following. Feel free to adjust the settings and text as you wish.

html 
<script>
	import { GradientHeading } from '@skeletonlabs/skeleton';
</script>

<GradientHeading tag="h1" direction="bg-gradient-to-br" from="from-primary-500" to="to-accent-500">
	Homepage
</GradientHeading>