Provider setup
Use exactly one FujiProvider. Theme, radius, and elevation are global by design - there is no per-component override. Each accepts a controlled prop, an uncontrolled default* prop, and an on*Change callback. For the full explanation of what each setting does, see Theming.
Basic setup
Set uncontrolled defaults and pass persist on the root provider to save the combined preference across navigation and refresh. theme accepts "light" | "dark" | "glass", radius "cornered" | "soft", and elevation "regular" | "floating".
<FujiProvider
persist
defaultTheme="light"
defaultRadius="cornered"
defaultElevation="regular"
>
<App />
</FujiProvider>Controlled vs uncontrolled
Pass a controlled value prop (theme, radius, elevation) with its on*Change callback to own the state yourself, or pass the default* prop to let the provider manage it. Do not mix both for the same axis.
// Controlled: you own the value
<FujiProvider
theme={theme}
onThemeChange={setTheme}
defaultRadius="soft"
>
<App />
</FujiProvider>Reading the active config
useFujiConfig() returns the active values and their setters from anywhere inside the provider.
import { useFujiConfig } from "@fujiui/react";
function AppearanceLabel() {
const { theme, radius, elevation, setTheme, setRadius, setElevation } = useFujiConfig();
return <span>{theme} · {radius} · {elevation}</span>;
}Components work without a FujiProvider ancestor too: they fall back to light + cornered + regular, so a single component can be dropped into an existing app before wiring up the provider.