Next.js - Skeleton

Skeleton

  1. get started
  2. installation
  3. nextjs

Next.js

Install and configure Skeleton for Next.js.

Requirements

ToolingMinimum Version
Next.js15
React18
Tailwind4

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.

1

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.

2

Install Skeleton

Install the Skeleton core and Svelte component packages.

Terminal window
npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@next
4

Configure Tailwind

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

globals.css
@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.

5

Set Active Theme

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

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

Done

Start the dev server using the following command.

Terminal window
npm run dev