Requirements
Skeleton’s Core Package is framework agnostic, meaning many of the Design System and Tailwind-centric features can used on any number of frameworks. This includes everything except components. In order to install Skeleton for additional framework, your app must be able to support the following:
| Tooling | Minimum Version |
|---|---|
| Package Management | NPM, PNPM, Yarn, etc. |
| Tailwind | 4 |
The exact instructions for installing Skeleton will differ per framework, however we’ve provided a general guidance below. Use this as a foundation for getting started in any number of unofficially supported frameworks.
Installation
WARNING: The following guide will install a pre-release version of Skeleton v3. 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
Refer to the official instructions for installing Tailwind on your framework of choice.
Install Skeleton
Install the Skeleton core package to gain access to most features - excluding Components.
npm i -D @skeletonlabs/skeleton@nextConfigure Tailwind
Locate your global stylesheet and append the following at the top of the file.
@import 'tailwindcss';
@import '@skeletonlabs/skeleton';@import '@skeletonlabs/skeleton/optional/presets';@import '@skeletonlabs/skeleton/themes/cerberus';Set Active Theme
Open the file containing the <html> tag for your project and set the data-theme attribute as follows.
<html data-theme="cerberus"> ...</html>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.