Next.js - Skeleton

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

Create a Project

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

npx create-next-app@latest my-app --typescript --tailwind --eslint

Install Skeleton

Install the Skeleton core and Skeleton React packages.

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

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 ]
        })
    ]
}

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.