1. get started
  2. ›
  3. Installation
  4. ›
  5. sveltekit

SvelteKit

Install and configure Skeleton for SvelteKit.

Requirements

ToolingMinimum Supported
SvelteKit 2
Svelte 5
Tailwind 4

Installation

1

Create a Project

Use the Svelte CLI to generate a new SvelteKit project.

bash 
npx sv create --types ts my-skeleton-app
cd my-skeleton-app

NOTE: If you did not select the options to add Tailwind, use npx sv add tailwindcss to add it retroactively.

2

Install Skeleton

Install the Skeleton core and Svelte component packages.

bash 
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
3

Configure Tailwind

Open your global stylesheet in /src/app.css and add the following imports:

css 
@import 'tailwindcss';

@import '@skeletonlabs/skeleton'; 
@import '@skeletonlabs/skeleton-svelte'; 
@import '@skeletonlabs/skeleton/themes/cerberus';
4

Set Active Theme

Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.

html 
<html data-theme="cerberus">
    <!-- ... -->
</html>

Done

Start the dev server using the following command.

bash 
npm run dev
View page on GitHub