Installation

Get up and running with Benflux UI in under a minute.

Prerequisites

Node.js 18+
React 18+
Next.js 13+ (App Router recommended), Vite, Remix, or Astro
Tailwind CSS v3

Option 1 — CLI (recommended)

The CLI auto-detects your framework, sets up config, and installs dependencies.

1. Initialize

npx benflux-ui init

2. Add components

npx benflux-ui add button card input

3. Import and use

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Click me</Button>
}

Option 2 — Manual

Install the package and configure your project manually.

1. Install the package

npm install @benflux-ui/react @benflux-ui/themes

2. Add Tailwind CSS

npm install -D tailwindcss autoprefixer postcss

3. Wrap your app with BenfluxProvider

app/layout.tsx

import { BenfluxProvider } from "@benflux-ui/themes"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <BenfluxProvider defaultTheme="dark">
          {children}
        </BenfluxProvider>
      </body>
    </html>
  )
}

Next.js — transpilePackages

If using @benflux-ui/react directly (without CLI), add it to transpilePackages in your next.config.ts.

// next.config.ts
const nextConfig = {
  transpilePackages: ["@benflux-ui/react", "@benflux-ui/themes"],
}