Quickstart Guide

This following guide will walk you through the process of creating a basic Skeleton app using SvelteKit.

Get Started

To begin, let's scaffold our project using the Skeleton CLI. Note that we've listed a couple required options for this guide.

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

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

Add Sidebar Navigation

Let's customize our App Shell's sidebar slot. Open /src/routes/+layout.svelte and add the following Tailwind utility classes to the AppShell 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 alongside any other fragment within the 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

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