1. get started
  2. installation
  3. nextjs

Next.js

Install and configure Next.js.

WARNING: This will install an early preview build of Skeleton v3. Please be aware that some features may be missing, incomplete, or non-functional at this time. Report bugs and issues to GitHub or Discord.

1

Create a Project

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

Terminal window
npm create next-app@latest my-skeleton-app --typescript --tailwind --eslint
cd my-skeleton-app
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 tailwind.config in the root of your project and make these changes:

tailwind.config
import type { Config } from 'tailwindcss';
import { join } from "path";
import { skeleton } from "@skeletonlabs/skeleton/plugin";
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,jsx,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.

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

Ready

You’re now ready to begin using Skeleton.