Skeleton

WARNING: The following guide will install a pre-release version of Skeleton v3. 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

Create a new Svelte 5 project using sv (the Svelte CLI). This generates a minimal project with Typescript enabled.

npx sv create --template minimal --types ts my-skeleton-app
cd my-skeleton-app

NOTE: make sure to select tailwind when prompted, otherwise use npx sv add tailwindcss to add it retroactively.

Install Skeleton

Install the Skeleton core and Svelte component packages.

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

Configure Tailwind

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

import type { Config } from 'tailwindcss';

import { skeleton, contentPath } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';

export default {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        contentPath(import.meta.url, 'svelte')
    ],
    theme: {
        extend: {},
    },
    plugins: [
        skeleton({
            // NOTE: each theme included will increase the size of your CSS bundle
            themes: [ themes.cerberus, themes.rose ]
        })
    ]
} satisfies Config

Set Active Theme

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

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

Done

Start the dev server using the following command.

npm run dev