Vite + Svelte

This guide will help you scaffold a basic Skeleton-powered app with Vite + Svelte.

Documentation

Getting Started

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

Adjust index.html

Open /src/index.html and add the following classes so our app div fills the canvas size.

html 
<div id="app" class="h-full overflow-hidden"></div>

Optionally you can enable Dark Mode by default by adding the .dark class to your HTML element at the top of the page.

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; }

App Shell Layout

Neither Vite nor Svelte provide an application router by default. For this guide, let's assume this app is a single landing page layout. Our page needs some structure, so let's implement the Skeleton App Shell component. Open your root app component in /src/App.svelte and add the following.

html 
<script>
	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 -->
	<div id="page">
		<h1>Hello Skeleton</h1>
	</div>
</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 Contents

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

html 
<div id="page" class="container mx-auto p-8 space-y-8">
	<h1>Homepage</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	<hr />
	<section class="card card-body">
		<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>