Styling & TypeScript

Fuji 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's classes are prefixed fuji- and its variables --fuji-*, so they never collide with your own Tailwind utilities or theme. No Tailwind config changes are required.

tsx

<Button className="mt-4 w-full md:w-auto">Save</Button>
// your own Tailwind utilities merge in via tailwind-merge - no conflicts

On Tailwind v4, Fuji 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 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, 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>.