Next.js - Skeleton

Requirements

Tooling	Minimum Version
Next.js	15
React	18
Tailwind	3

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

Discord

Create a Project

Start by creating a new project using create-next-app, the Next.js CLI:

npm create next-app@15.1.6 my-skeleton-app --typescript --tailwind --eslint
cd my-skeleton-app

NOTE: note that we are temporarily pinning v15.1.6 to ensure Tailwind v3 is the only version available to install. Please note that Tailwind v4 support is coming soon, at which point we’ll enable @latest again.

Install Skeleton

Install the Skeleton core and Svelte component packages.

npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@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/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
        contentPath(import.meta.url, 'react')
    ],
    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/layout.tsx, 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