Installation

Styling & TypeScript

Fuji UI is styled entirely through a single stylesheet and CSS custom properties, so it drops into Tailwind and non-Tailwind projects the same way. TypeScript declarations ship in the package.

bash

npm install @fujiui/react

Tailwind projects

Fuji UI's classes are prefixed and its variables are --fuji-*, so they never collide with your own Tailwind utilities or theme. On Tailwind v4, add one layer declaration at the very top of your global CSS, above every @import, so utilities you pass as className (p-0, w-full, mt-4) win over a component's own styling.

css

/* app/globals.css (Next.js) or src/index.css (Vite) - first line */
@layer properties, theme, base, fuji, components, utilities;

@import "tailwindcss";

On Tailwind v4, Fuji UI tokens are exposed as @theme variables (--color-fuji-*, --radius-fuji-*, --shadow-fuji-*), so you can reference them directly in your own utilities such as bg-fuji-surface.

Non-Tailwind projects

Tailwind is not a runtime dependency. Fuji UI ships one pre-built stylesheet containing every class the components use plus the token variables. Import it once; no build-step integration is required.

tsx

import "@fujiui/react/styles.css";
import { FujiProvider, Button } from "@fujiui/react";

export function App() {
  return (
    <FujiProvider>
      <Button>Continue</Button>
    </FujiProvider>
  );
}

Override any component with plain CSS targeting the className and classNames slots, or by redefining the --fuji-* custom properties in your own stylesheet.

TypeScript

The package ships its own .d.ts declarations, so no @types package is needed. Shared types (ComponentSize, ComponentTone, StatusTone, ComponentAppearance, FujiTheme, FujiMaterial, FujiRadius, FujiElevation) are exported from the package root.

tsx

import type { ComponentTone, ComponentSize } from "@fujiui/react";

function StatusBadge({ tone, size }: { tone: ComponentTone; size: ComponentSize }) {
  // ...
}

Every component's public props type is exported too (ButtonProps, DialogContentProps), so you can type wrappers without React.ComponentProps<typeof Button>.