Installation

Install the core package in a React or Next.js project:

npm install @vibeflui/core

The core package declares React and React DOM as peer dependencies. It also includes runtime dependencies used by the core renderer, including Iconify, TanStack Table, and Zod.

Requirements

Next.js usage

Use a client component when the page passes runtime handlers, registry values, local state, or other client-only behavior. The examples in this section use client pages:

app/users/page.tsx

"use client";

import { FluiKit } from "@vibeflui/core";

Optional adapters

Install adapter packages only when your schema uses them. For example, install the React Select adapter only when fields reference that adapter.

npm install @vibeflui/react-select react-select

Adapter docs are in Adapters.

CSS

The core renderer and examples use Tailwind-style class names. These classes live inside the compiled @vibeflui/* package output under node_modules, not in your own source files. Tailwind only generates CSS for classes it can actually see, so you must point it at the package output, or FluiKit renders with no styling.

Tailwind v4 (current)

Add an @source directive next to your @import "tailwindcss"; line, in whichever CSS file bootstraps Tailwind for your app:

/* app/globals.css */
@import "tailwindcss";
@source "../node_modules/@vibeflui";

Add one more @source line per adapter package you install, for example:

@source "../node_modules/@vibeflui/shadcn";

Adjust the relative path to match where your CSS entry file actually lives in your project.

Tailwind v3

Add the package output to the content array in tailwind.config.ts:

// tailwind.config.ts
export default {
  content: [
    "./app/**/*.{ts,tsx}",
    "./node_modules/@vibeflui/**/*.{js,ts,jsx,tsx}"
  ]
}