Next.js - Skeleton

Requirements

Tooling	Minimum Version
Next.js	15
React	18
Tailwind	4

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

Use the Next.js CLI to scaffold a new project.

NOTE: The Next.js CLI does not yet install Tailwind v4. Please follow the official Tailwind guide and choose NO when prompted to installed Tailwind by the Next.js CLI.

Install Skeleton

Install the Skeleton core and Svelte component packages.

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

Configure Tailwind

Open your global stylesheet in /src/app/globals.css and add the following imports:

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import '@skeletonlabs/skeleton/themes/cerberus';

@source '../../node_modules/@skeletonlabs/skeleton-react';

NOTE: make sure the @source path resolves correctly for your application structure.

Set Active Theme

Open /src/app/layout.tsx, then set the data-theme attribute on the HTML tag to define the active theme.

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

Done

Start the dev server using the following command.

npm run dev