Next.js - Skeleton

WARNING: The following guide will install the Skeleton v3 Beta using the Next.js CLI. Please be aware that some features may be missing, incomplete, or non-functional at this time. Please report bugs and issues on GitHub or Discord.

Create a Project

Start by creating a new project using create-next-app (the Next.js CLI):

npm create next-app@latest my-skeleton-app --typescript --tailwind --eslint
cd my-skeleton-app

Install Skeleton

Install the Skeleton core and Svelte component packages.

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

Configure Tailwind

Open tailwind.config in the root of your project and make these changes:

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({
            // NOTE: each theme included will be added to your CSS bundle
            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>

Done

Start the dev server using the following command.

npm run dev