Next.js - Skeleton

Requirements

Tooling	Supported Versions
Next.js	15
React	18
Tailwind	4

Installation

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 @skeletonlabs/skeleton-react

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/dist';

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