1. get started
  2. Installation
  3. nextjs

Next.js

Install and configure Skeleton for Next.js.

Requirements

ToolingMinimum Supported
Next.js 15
React 18
Tailwind 4

Installation

1

Create a Project

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

npm create next-app@latest my-skeleton-app 
cd my-skeleton-app
2

Install Skeleton

Install the Skeleton core and React component packages.

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

Configure Tailwind

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

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton-react';
@import '@skeletonlabs/skeleton/themes/cerberus';
5

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