React component library

Introduction

fuji-ui is a calm, warm, precise React component library. It gives you a full set of accessible components that share one token system, one provider, and one set of size, tone, and appearance conventions, so an interface built with Fuji 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 light, dark, and glass themes, 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 supplies the visual language on top.

Quick usage

tsx

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

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.
Design principles: the calm, warm, restrained visual language and what to avoid.
Theming: themes, radius, elevation, colors, tokens, shadows, and glass in one place.
Components: every component with a live preview, usage code, and props.
Examples: realistic apps composed entirely from Fuji components.