SvelteKit - Skeleton

WARNING: The following guide will install the Skeleton v3 Beta using the Svelte CLI. Please be aware that some features may be missing, incomplete, or non-functional at this time. Please report bugs and issues on GitHub or Discord.

Create a Project

Start by creating a new Svelte 5 project using sv (the Svelte CLI):

NOTE: make sure to select tailwind when prompted!

npx sv create my-skeleton-app
cd my-skeleton-app
npm install

Install Skeleton

Install the Skeleton core and Svelte component packages.

npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-svelte@next

Configure Tailwind

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

npm i --save-dev @types/node

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

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({
            // NOTE: each theme included will be added to your CSS bundle
            themes: [ themes.cerberus, themes.rose ]
        })
    ]
}

Set Active Theme

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

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

Done

Start the dev server using the following command.

npm run dev