Requirements
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