Skeleton

Requirements

The core of Skeleton is our Tailwind Plugin, which provides access to our framework agnostic design system and Tailwind-based features - everything except components. This comes with two prerequisites:

Tooling	Minimum Version
Package Management	NPM, PNPM, Yarn, etc.
Tailwind	3

The exact instructions for installing Skeleton will differ per framework, however we’ve provided a generic guide below. Use this as a foundation for getting started in non-supported frameworks.

Installation

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

Scaffold your web-based application using any framework (such as Nuxt, SolidStart, Laravel, etc.)

Install Tailwind

Follow the official instructions to install Tailwind for your framework of choice.

Install Skeleton

Install the Skeleton core package to gain access to the Skeleton Tailwind plugin.

npm i -D @skeletonlabs/skeleton@next

Configure Tailwind

Open tailwind.config in the root of your project. The structure of this file may differ slightly for your framework.

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // IMPORTANT: preserve any settings provided here
  ],
  theme: {
    extend: {},
  },
  plugins: [
    skeleton({
      // NOTE: each theme included will increase the size of your CSS bundle
      themes: [themes.cerberus, themes.rose],
    }),
  ],
};

Set Active Theme

Open the file containing the <body> tag for your project and set the data-theme attribute to define your active theme.

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

Run the Project

Start the dev server for your framework of choice.

Support

While we officially limit support for Skeleton to React, Svelte, and Astro for now, Skeleton has an active community of users on GitHub and Discord. If you need support (directly related to Skeleton) considering reaching out in these spaces. Other members of the community may be able to assist you.