SvelteKit

This guide will help you create a basic Skeleton app within SvelteKit.

Documentation

Getting Started

To begin, let's scaffold our project using the Skeleton CLI. We've listed the required settings.

console 
npm create skeleton-app@latest my-skeleton-app
	- Enable SvelteKit's Typescript syntax
	- Select the "Skeleton Welcome" template
cd my-skeleton-app
npm run dev

By selecting the "Skeleton Welcome" template the project will come preconfigured with both the App Shell and App Bar components in /src/routes/+layout.svelte.

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">

Next, let's implement a navigation list within the App Shell's left sidebar slot. Append this slot fragement anywhere within AppShell.

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 elements automatically styled by the all.css stylesheet in our root layout.

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. First, import the component, then replace the H1 heading on your homepage with the follow. 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>

Congrats! You have now created a simple Skeleton project. Feel free to begin customizing and implementing additional Tailwind, Svelte, and Utility features.