1. get started
  2. ›
  3. installation
  4. ›
  5. vite react

Vite + React

Install and configure Skeleton for Vite + React.

LLM

Requirements

ToolingMinimum Supported
Vite6
React18
Tailwind4

Installation

1

Create a Project

Start by creating a new Vite project. This will install React and Typescript.

Terminal window
npm create vite@latest
  - Set your project named as desired
  - Set React as the framework
  - Set Typescript as the variant
cd {yourProjectName}
npm install
2

Install Skeleton

Install the Skeleton core and React component packages.

Terminal window
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-react
3

Install Tailwind

Install Tailwind and and the Tailwind Vite plugin.

Terminal window
npm install tailwindcss @tailwindcss/vite

Implement the plugin in vite.config in the root of your project.

vite.config
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";


export default defineConfig({
  plugins: [
    tailwindcss(),
    react() // <-- Must come after Tailwind
  ],
});
4

Configure Tailwind

Open your global styleshset in /src/index.css and append the following at the top of the file.

index.css
@import 'tailwindcss';


@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton-react';
@import '@skeletonlabs/skeleton/themes/cerberus';
5

Set the Active Theme

Open index.html, then set the data-theme attribute on the HTML tag to define the active theme.

index.html
<html data-theme="cerberus">...</html>

Done

Start the dev server using the following command.

Terminal window
npm run dev