1. get started
  2. installation
  3. nextjs

Next.js

Install and conifigure Next.js.

WARNING: this page is a preview. Skeleton v3 is not yet available. The following instructions will fail.

1

Create a Project

Start by creating a new project using create-next-app:

Terminal window
npx create-next-app@latest my-app --typescript --tailwind --eslint
2

Install Skeleton

Install the Skeleton core and Skeleton React packages.

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

Configure Tailwind

Open and configure tailwind.config.js as shown.

import { join } from 'path';
import { skeleton } from '@skeletonlabs/skeleton';
import * as themes from "@skeletonlabs/skeleton/themes";
/** @type {import('tailwindcss').Config} \*/
export default {
content: [
"./src/pages/**/_.{js,ts,jsx,tsx,mdx}",
"./src/components/\*\*/_.{js,ts,jsx,tsx,mdx}",
"./src/app/**/\*.{js,ts,jsx,tsx,mdx}",
join(require.resolve('@skeletonlabs/skeleton-react'), '../**/\*.{html,js,tsx,ts}')
],
theme: {
extend: {},
},
plugins: [
skeleton({
themes: [ themes.cerberus, themes.rose ]
})
]
}
5

Set Active Theme

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

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

Ready

You’re now ready to begin using Skeleton.