1. get started
  2. installation
  3. sveltekit

SvelteKit

Install and configure SvelteKit.

WARNING: This will install an early preview build of Skeleton v3 using Svelte 5. Please be aware that some features may be missing, incomplete, or non-functional at this time. Report bugs and issues to GitHub or Discord.

1

Create a Project

Start by creating a new Svelte 5 project using create-svelte:

Terminal window
npm create svelte@latest my-skeleton-app
- Addtional Options > Svelte 5 Preview (required!)
cd my-skeleton-app
npm install
2

Install Skeleton

Install the Skeleton core and Skeleton Svelte packages.

Terminal window
npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next
3

Install Tailwind

Install Tailwind using Svelte-Add to automate the process.

Terminal window
npx svelte-add@latest tailwindcss --tailwindcss-typography false

NOTE: if you see “something went wrong”, everything will work as expected. Please proceed to the next step.

4

Configure Tailwind

You may optionally install the @types/node package to prevent LSP errors in your Tailwind config.

Terminal window
npm i --save-dev @types/node

Open tailwind.config in the root of your project and make these changes:

tailwind.config
import type { Config } from 'tailwindcss';
import { join } from 'path';
import { skeleton } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';
/** @type {import('tailwindcss').Config} \*/
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}')
],
theme: {
extend: {},
},
plugins: [
skeleton({
themes: [ themes.cerberus, themes.rose ]
})
]
}
5

Set Active Theme

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

app.html
<body data-theme="cerberus">...</body>

Ready

You’re now ready to begin using Skeleton.