Get Started

Please be aware that Skeleton currently only supports Svelte applications built using SvelteKit. We recommend at least moderate experience with Svelte, SvelteKit, and Tailwind CSS before your proceed.

Install Skeleton

Skeleton CLI

Manual Install

If you're creating a new project we highly recommend this option. The CLI will not only scaffold a new SvelteKit project for you, but automatically configure Skeleton, install Tailwind, and add optional dependencies on demand.

console

npm create skeleton-app@latest my-skeleton-app
	- Enable SvelteKit's Typescript syntax (recommended)
cd my-skeleton-app

Tailwind CSS

Skeleton features tight integration with Tailwind CSS.

Skeleton CLI

Manual Install

The CLI will automatically install and configure Tailwind and PostCSS within your project.

Themes

Skeleton leans into Tailwind's best practices when implementing themes. This includes support for color opacity and dark mode. Themes also enable Skeleton's design tokens system.

Preset Themes

Skeleton provides a number of preset themes out of the box. Choose a theme below for specific instruction.

First, register your desired theme in tailwind.config.[cjs|js|ts], found in the root of your project. This will ensure it's loaded and available.

typescript

plugins: [
	skeleton({
		themes: {
			preset: [ "skeleton" ]
		}
	})
]

Next, open /src/app.html and define the active theme to display via the data-theme attribute.

html

<body data-theme="skeleton">

Learn more about Skeleton themes in this comprehensive guide.

Themes →

Ready to create a custom theme? Try the Theme Generator.

Generator →