Pricing

Create a project

PreviousNext

Create a Next.js or Vite app with React, TypeScript and Tailwind CSS v4, ready for the slabui CLI and the theme editor.

SlabUI works in React apps built with Next.js (App Router) or Vite. If you already have one with TypeScript and Tailwind CSS v4, skip to Set up SlabUI.

Requirements

  • Node.js 22.12 or later.
  • React 19 and Tailwind CSS v4. The commands below install both.

Next.js

Create the app

pnpm dlx create-next-app@latest my-app --typescript --tailwind --app --import-alias "@/*"

This creates a Next.js app with the App Router, TypeScript and Tailwind CSS v4, with the @/* path alias in tsconfig.json and the global CSS in app/globals.css.

Open the project

cd my-app

Then set up SlabUI.

Vite

Create the app

pnpm dlx create-vite@latest my-app --template react-ts

This creates a React app with TypeScript. Then open the project:

cd my-app

Install Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

Configure Vite

Add the Tailwind plugin and let Vite read the path aliases from tsconfig.json, so imports like @/components/ui/button work:

vite.config.ts
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: { tsconfigPaths: true },
})

resolve.tsconfigPaths is available from Vite 8. On Vite 6 or 7, use the vite-tsconfig-paths plugin instead.

Import Tailwind

Replace the content of src/index.css with:

src/index.css
@import "tailwindcss";

You don't need to add the @/* alias yourself: slabui init adds it to tsconfig.json when it is missing.

Then set up SlabUI.

Set up SlabUI

From the project folder, run init:

pnpm dlx slabui@latest init

It creates slabui.json, finds your global CSS (app/globals.css or src/index.css) and replaces its content with the SlabUI theme, keeping a copy of the original as .bak (it asks first). The other CSS files go to styles/core/. See CLI installation for every option and CSS files for the files it creates.

Then add your first component:

pnpm slabui add button
import { Button } from "@/components/ui/button"
 
export function Example() {
  return <Button>Click me</Button>
}

To edit the theme live in your running app, add the theme editor.