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 variant-filled-primary" href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">SvelteKit</a>
		<a class="btn variant-filled-secondary" href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind</a>
		<a class="btn variant-filled-tertiary" href="https://github.com/" target="_blank" rel="noreferrer">GitHub</a>
	</section>
</div>

Add a Component

Finally let's implement Skeleton's Avatar component. First, import the component, then add it anywhere within your page, we recommend within the .container element.

html

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

<Avatar src="https://i.pravatar.cc/" />

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