Theming & Configurationduskmoonimplemented5 demos

ConfigProvider

ConfigProvider passes component configuration through a subtree.

Import@duskmoon-dev/components/config-provider

5API sections

29documented props

3behavior scenarios

Key API

componentprefixClsiconPrefixClsdirectionlocaletheme

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

ConfigProvider is most often configured through `component`, `prefixCls`, `iconPrefixCls`, `direction`.

Covered behavior

Provides config values and root direction classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Config Provider

Basic usage

authored

Import the component stylesheet and ConfigProvider from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { ConfigProvider } from "@duskmoon-dev/components/config-provider";

export function Example() {
  return (<ConfigProvider>DuskMoon Config Provider</ConfigProvider>);
}

Preview

DuskMoon Config Provider

Provides config values and root direction classes

test-backed

ConfigProvider scenario from the component test coverage: provides config values and root direction classes.

Source

import "@duskmoon-dev/components/styles.css";
import { ConfigProvider } from "@duskmoon-dev/components/config-provider";

export function ConfigProviderProvidesConfigValuesAndDemo() {
  return (<ConfigProvider>DuskMoon Config Provider</ConfigProvider>);
}

Preview

DuskMoon Config Provider

Supports nested merge and fragment mode

test-backed

ConfigProvider scenario from the component test coverage: supports nested merge and fragment mode.

Source

import "@duskmoon-dev/components/styles.css";
import { ConfigProvider } from "@duskmoon-dev/components/config-provider";

export function ConfigProviderSupportsNestedMergeAndDemo() {
  return (<ConfigProvider>DuskMoon Config Provider</ConfigProvider>);
}

Preview

DuskMoon Config Provider

Supports global config defaults

test-backed

ConfigProvider scenario from the component test coverage: supports global config defaults.

Source

import "@duskmoon-dev/components/styles.css";
import { ConfigProvider } from "@duskmoon-dev/components/config-provider";

export function ConfigProviderSupportsGlobalConfigDefaultsDemo() {
  return (<ConfigProvider>DuskMoon Config Provider</ConfigProvider>);
}

Preview

Sunshine Theme

DuskMoon Config Provider

Moonlight Theme

DuskMoon Config Provider

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <ConfigProvider>DuskMoon Config Provider</ConfigProvider>
</div>

<div data-theme="moonlight">
  <ConfigProvider>DuskMoon Config Provider</ConfigProvider>
</div>

API

The API reference below lists every parsed exported type or interface for ConfigProvider. Start with `component`, `prefixCls`, `iconPrefixCls`, `direction` for common usage.

Types: packages/components/src/components/config-provider/ConfigProvider.types.tsScenarios: packages/components/src/components/config-provider/ConfigProvider.test.tsx

ConfigProviderPropsinterface extends Omit< ComponentPropsWithoutRef<"div">, "children" | "className" | "prefix" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures ConfigProvider.
`className`	`string`	No	className configures ConfigProvider.
`component`	`false \| ElementType`	No	component configures ConfigProvider.
`prefixCls`	`string`	No	prefixCls configures ConfigProvider.
`iconPrefixCls`	`string`	No	iconPrefixCls configures ConfigProvider.
`direction`	`ConfigDirection`	No	direction configures ConfigProvider.
`locale`	`Record<string, unknown>`	No	locale configures ConfigProvider.
`theme`	`ConfigProviderTheme`	No	theme configures ConfigProvider.
`getPopupContainer`	`(triggerNode?: HTMLElement) => HTMLElement`	No	getPopupContainer configures ConfigProvider.
`renderEmpty`	`(componentName?: string) => ReactNode`	No	renderEmpty configures ConfigProvider.
`virtual`	`boolean`	No	virtual configures ConfigProvider.
`wave`	`Record<string, unknown> \| false`	No	wave configures ConfigProvider.

ConfigProviderThemeinterface

Prop	Type	Required	Description
`token`	`Record<string, unknown>`	No	token configures ConfigProvider.
`components`	`Record<string, unknown>`	No	components configures ConfigProvider.
`algorithm`	`unknown`	No	algorithm configures ConfigProvider.
`hashed`	`boolean`	No	hashed configures ConfigProvider.
`cssVar`	`boolean \| Record<string, unknown>`	No	cssVar configures ConfigProvider.

ConfigProviderContextValueinterface

Prop	Type	Required	Description
`prefixCls`	`string`	Yes	prefixCls configures ConfigProvider.
`iconPrefixCls`	`string`	Yes	iconPrefixCls configures ConfigProvider.
`direction`	`ConfigDirection`	No	direction configures ConfigProvider.
`locale`	`Record<string, unknown>`	No	locale configures ConfigProvider.
`theme`	`ConfigProviderTheme`	No	theme configures ConfigProvider.
`getPopupContainer`	`(triggerNode?: HTMLElement) => HTMLElement`	No	getPopupContainer configures ConfigProvider.
`renderEmpty`	`(componentName?: string) => ReactNode`	No	renderEmpty configures ConfigProvider.
`virtual`	`boolean`	No	virtual configures ConfigProvider.
`wave`	`Record<string, unknown> \| false`	No	wave configures ConfigProvider.

ConfigProviderComponentinterface extends ForwardRefExoticComponent< ConfigProviderProps & RefAttributes<HTMLElement> >

Prop	Type	Required	Description
`ConfigContext`	`Context<ConfigProviderContextValue>`	Yes	ConfigContext configures ConfigProvider.
`useConfig`	`() => ConfigProviderContextValue`	Yes	useConfig configures ConfigProvider.
`config`	`(config: Partial<ConfigProviderContextValue>) => void`	Yes	config configures ConfigProvider.

ConfigDirectiontype

"ltr" | "rtl"