Installation

Quick Start

npx @beaket/ui init
npx @beaket/ui add button

Requirements

Tailwind CSS 4 Setup

Vite / React Router v7

pnpm add -D tailwindcss @tailwindcss/vite
// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Next.js

pnpm add -D tailwindcss @tailwindcss/postcss postcss
// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

CSS

Add to your main CSS file:

@import "tailwindcss";

Path Alias Setup

Components use @/ imports.

Vite

// vite.config.ts
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
// tsconfig.json or tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Next.js

Already configured by default.

What init does