ConfigProvider
ConfigProvider configures every raft-ui component below it: theme, theme mode, theme overrides, locale, component defaults, class prefix and where overlays mount. Each field is merged over the nearest parent provider, so providers can be nested.
Demos
Nested theme scopes
A provider that sets theme or themeMode opens a theme scope on its own element. Scopes nest: the inner provider inherits elegant from its parent and only switches the mode.
Theme overrides
themeOverrides writes CSS variables onto the provider’s element. Tokens derived from an overridden base token follow it.
Locale
locale sets the UI strings for everything below the provider. Switch between zhCN and enUS: the loading button and the spinner announce their state to screen readers in the chosen language. Strings a locale leaves out fall back to enUS.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
abstract | boolean | false | Renders no element and only provides context. Ignored, with a warning, when theme, themeMode or themeOverrides is set. | Unreleased |
bordered | boolean | undefined | Default for components that support bordered. | Unreleased |
clsPrefix | string | "r" | Class name prefix. The shipped CSS uses r, so a different prefix also needs CSS built with it. | Unreleased |
componentOptions | Record<string, Record<string, unknown>> | null | undefined | Default props per component, merged over the parent’s per component. null stops inheriting. | Unreleased |
highlighter | CodeHighlighter | undefined | Shiki highlighter for Code, loaded with codeTheme. raft-ui does not bundle Shiki; see Code. undefined inherits the parent’s. | Unreleased |
locale | RLocale | null | undefined | UI strings. undefined inherits the parent’s; null resets to enUS. | Unreleased |
namespace | string | undefined | Class added to containers that overlays portal into. | Unreleased |
portalContainer | HTMLElement | null | document.body | Where overlays portal to. | Unreleased |
theme | "brutal" | "elegant" | undefined | Theme family. undefined inherits the parent’s. | Unreleased |
themeMode | "light" | "dark" | undefined | Light or dark. undefined inherits the parent’s. | Unreleased |
themeOverrides | Record<"--r-…", string> | null | undefined | CSS variables written on the provider’s element, merged over the parent’s. null stops inheriting. | Unreleased |
Locales
enUS and zhCN ship with the package. createLocale(partial, fallback) completes a partial locale from a full one, namespace by namespace.
import { ConfigProvider, createLocale, enUS, zhCN } from "raft-ui";
const enGB = createLocale({ name: "en-GB", global: { cancel: "Dismiss" } }, enUS);
<ConfigProvider locale={zhCN}>…</ConfigProvider>;