Leaf UI
  • English

      • ConfigProvider

      Configure a region's theme, appearance and language.

      Regional themes and languages

      Live previewRegional themes and languages
      basic.tsx
      import { Button, ConfigProvider, DatePicker, Select, Switch, useMessage } from '@sudden3/leaf-ui';
import { useState } from 'react';

function Region() {
  const { message, contextHolder } = useMessage();
  return (
    <div className="leaf-demo-row">
      <Select aria-label="Options" options={[]} />
      <DatePicker aria-label="Date" />
      <Button onClick={() => message.success('Success / Completed')}>Message</Button>
      {contextHolder}
    </div>
  );
}
export function ConfigProviderBasic() {
  const [english, setEnglish] = useState(true);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Switch checked={english} onChange={(event) => setEnglish(event.target.checked)}>
        English
      </Switch>
      <ConfigProvider
        locale={english ? 'en-US' : 'zh-CN'}
        theme={{ primaryColor: '#7654c6', borderRadius: 4 }}
      >
        <Region />
      </ConfigProvider>
      <ConfigProvider theme={{ primaryColor: '#087f8c', borderRadius: 16 }}>
        <Region />
      </ConfigProvider>
    </div>
  );
}

      Base sizes and advanced overrides

      Small and large controls follow the base height. Use tokens only when a particular size needs an explicit override.

      Live previewBase sizes and advanced overrides
      sm
      md
      lg
      sizes.tsx
      import { Button, ConfigProvider, Input } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function ConfigProviderSizes() {
  const [height, setHeight] = useState(34);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <label>
        Base height: {height}px
        <input
          aria-label="Base control height"
          type="range"
          min="28"
          max="44"
          value={height}
          onChange={(event) => setHeight(Number(event.target.value))}
        />
      </label>
      <ConfigProvider
        className="leaf-demo-stack"
        theme={{ controlHeight: height, borderRadius: 8 }}
      >
        {(['sm', 'md', 'lg'] as const).map((size) => (
          <div key={size} className="leaf-demo-control-row">
            <span className="leaf-demo-size">{size}</span>
            <Input size={size} aria-label={`${size} themed input`} placeholder="Project name" />
            <Button size={size}>Save</Button>
          </div>
        ))}
      </ConfigProvider>
      <ConfigProvider
        theme={{ controlHeight: height, tokens: { controlHeightSm: 26, borderRadiusLg: 20 } }}
      >
        <Button size="sm" variant="outline">
          Advanced override: small height stays at 26px
        </Button>
      </ConfigProvider>
    </div>
  );
}

      ConfigProvider API

      PropertyTypeDefaultDescription
      themeLeafTheme—Regional settings; omitted fields inherit
      locale'zh-CN' | 'en-US''zh-CN'Built-in language; nested providers inherit
      childrenReactNode—Content in the region

      Other native div attributes, className and style apply to the container. Configure themes through theme.

      LeafTheme

      PropertyTypeDefaultDescription
      primaryColorstring'#20834a'Primary color with derived interaction states; dark appearance defaults to a lighter green
      borderRadiusnumber | string10Base radius; small / large radii use × 0.6 / 1.6
      controlHeightnumber | string34Base height; small / large heights use − / + 6px
      fontSizenumber | string14Base font; small / large fonts use − / + 2px
      fontFamilystringSystem sans-serifFont family
      appearance'light' | 'dark''light'Light or dark; inherits explicit ancestor settings
      motionbooleantrueEnable transitions and loading icon rotation; respects reduced motion
      tokensLeafThemeTokens—Optional advanced overrides

      Defaults apply to an unconfigured application. Nested providers inherit supplied ancestor settings. CSS lengths are accepted; derived small height and font values stay at or above 1px.

      LeafThemeTokens

      All fields are optional. Explicit values take precedence over generated values.

      PropertyTypeDefaultDescription
      onPrimaryColorstringThemeText on primary backgrounds
      dangerColor / onDangerColorstringAppearanceDanger background / foreground
      successColor / warningColor / infoColorstringAppearanceSuccess / warning / information
      textColor / mutedTextColorstringAppearanceMain / secondary text
      surfaceColor / mutedSurfaceColorstringAppearanceMain / subtle surfaces
      borderColorstringAppearanceNeutral borders
      borderRadiusSm / borderRadiusLgnumber | stringBase × 0.6 / 1.6Small / large radius override
      controlHeightSm / controlHeightLgnumber | stringBase − / + 6pxSmall / large height override
      fontSizeSm / fontSizeLgnumber | stringBase − / + 2pxSmall / large font override
      fontWeightnumber500Weight used by buttons
      motionDurationnumber | string160Numbers are ms; CSS times also accepted; motion=false forces 0
      motionEasingstring'ease'Transition timing function
      popupZIndex / modalZIndex / messageZIndexnumber1000 / 1100 / 1200Popup / modal / message stacking
      buttonBorderRadius / buttonHeightnumber | stringControl sizeButton-only radius / shared height override
      choiceBorderRadiusnumber | stringBase × 0.5Checkbox radius
      focusColorstringSemantic colorFocus outlines
      primaryHoverColor / primaryActiveColorstringPrimary colorHover / pressed primary states
      primarySoftColor / primarySoftHoverColor / primarySoftActiveColorstringPrimary colorSoft primary backgrounds and states
      primaryBorderColorstringPrimary colorPrimary border
      dangerHoverColor / dangerActiveColorstringDanger colorHover / pressed danger states

      Types

      import type { ConfigProviderProps, LeafTheme, LeafThemeTokens, LeafLocale } from '@sudden3/leaf-ui';

const theme: LeafTheme = { primaryColor: '#7654c6', borderRadius: 8 };
const advanced: LeafThemeTokens = { controlHeightLg: 44 };

      LeafLocale is 'zh-CN' | 'en-US'. ConfigProviderProps corresponds to the ConfigProvider API.

      Usage notes

      Nested regions merge tokens by field; explicit derived-size overrides remain inherited. Floating panels, Modal and message / confirm holders inside a region inherit the configuration.

      Translate application content, labels and options yourself. Configure themes through ConfigProvider and consume CSS variables in custom components. See theming and SSR usage.