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
:
npx create-next-app@latest my-app --typescript --tailwind --eslint
2
Install Skeleton
Install the Skeleton core and Skeleton React packages.
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.