Docs

Introduction

Fuji UI is a lightweight, minimalist React component library. Every component is accessible by default and shares one token system, one provider, and one set of size, tone, and appearance conventions, so an interface built with Fuji UI reads as a single coherent surface rather than a collection of parts.

What's in the library

Components across foundation, forms, navigation, data display, feedback, and overlays, plus a chart family, all themeable through a light or dark theme, a solid or glass material, a cornered or soft radius, and regular or floating elevation. Overlay and form primitives build on @base-ui/react for focus management, ARIA, and keyboard behavior; Fuji UI supplies the visual language on top.

Quick usage

tsx

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

export default function App() {
  return (
    <FujiProvider defaultTheme="light" defaultRadius="cornered">
      <Button tone="forest">Save changes</Button>
    </FujiProvider>
  );
}

Where to go next

Installation: install the package, import the stylesheet, and wrap your app in the provider.
AI coding agents: give Claude Code, Codex, or Cursor the API of the version you have installed, through the MCP server and skill.
Design principles: the calm, warm, restrained visual language and what to avoid.
Theming: theme, material, radius, elevation, colors, tokens, and shadows in one place.
Components: every component with a live preview, usage code, and props.
Examples: realistic apps composed entirely from Fuji UI components.