or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddata-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.mdother-components.md
tile.json

configuration.mddocs/

Configuration and Theming

Global configuration, theming, and internationalization utilities for customizing Ant Design components across your entire application. These tools provide comprehensive control over appearance, behavior, and localization.

Capabilities

ConfigProvider Component

Global configuration provider for setting theme, locale, and component-level defaults throughout your application.

interface ConfigProviderProps {
  autoInsertSpaceInButton?: boolean;
  children?: React.ReactNode;
  componentDisabled?: boolean;
  componentSize?: SizeType;
  csp?: CSPConfig;
  direction?: "ltr" | "rtl";
  dropdownMatchSelectWidth?: boolean;
  form?: {
    colon?: boolean;
    layout?: "horizontal" | "vertical" | "inline";
    requiredMark?: boolean | "optional" | RequiredMark;
    scrollToFirstError?: boolean | ScrollToFirstErrorOptions;
    validateMessages?: ValidateMessages;
  };
  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
  getTargetContainer?: () => HTMLElement;
  iconPrefixCls?: string;
  input?: {
    autoComplete?: string;
  };
  locale?: Locale;
  popupMatchSelectWidth?: boolean;
  popupOverflow?: "viewport" | "scroll";
  prefixCls?: string;
  renderEmpty?: (componentName?: string) => React.ReactNode;
  space?: {
    size?: SizeType | number;
    classNames?: SpaceClassNames;
    styles?: SpaceStyles;
  };
  spin?: {
    indicator?: React.ReactNode;
  };
  theme?: ThemeConfig;
  virtual?: boolean;
  warning?: WarningContextProps;
  wave?: {
    disabled?: boolean;
    showEffect?: (node: HTMLElement, info: { className: string; token: GlobalToken; component?: string; event: React.MouseEvent<HTMLElement>; hashId: string }) => void;
  };
}

interface ThemeConfig {
  token?: Partial<AliasToken>;
  components?: OverrideToken;
  algorithm?: MappingAlgorithm | MappingAlgorithm[];
  hashed?: boolean;
  inherit?: boolean;
  cssVar?: boolean | {
    prefix?: string;
    key?: string;
  };
}

declare const ConfigProvider: React.FC<ConfigProviderProps> & {
  /** @private Internal context. Do not use in your production code */
  ConfigContext: React.Context<ConfigConsumerProps>;
  config: (options: {
    theme?: ThemeConfig;
    prefixCls?: string;
    iconPrefixCls?: string;
    getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
  }) => void;
  useConfig: () => ConfigConsumerProps;
};

Usage Examples:

import { ConfigProvider, Button, Space, Input, DatePicker, theme } from "antd";
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import dayjs from "dayjs";

// Basic theme configuration
<ConfigProvider
  theme={{
    token: {
      // Seed Token
      colorPrimary: "#00b96b",
      borderRadius: 2,
      // Alias Token
      colorBgContainer: "#f6ffed",
    },
  }}
>
  <div className="App">
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
  </div>
</ConfigProvider>

// Dark theme
<ConfigProvider
  theme={{
    algorithm: theme.darkAlgorithm,
  }}
>
  <div className="App">
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Input placeholder="Please Input" />
  </div>
</ConfigProvider>

// Compact theme
<ConfigProvider
  theme={{
    algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
  }}
>
  <div className="App">
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Input placeholder="Please Input" />
  </div>
</ConfigProvider>

// Component-specific theme
<ConfigProvider
  theme={{
    components: {
      Button: {
        colorPrimary: "#00b96b",
        algorithm: true, // Enable algorithm
      },
      Input: {
        colorPrimary: "#eb2f96",
        algorithm: true,
      },
    },
  }}
>
  <div className="App">
    <Button type="primary">Primary</Button>
    <Input placeholder="Please Input" />
  </div>
</ConfigProvider>

// Locale configuration
<ConfigProvider locale={enUS}>
  <div className="App">
    <DatePicker />
    <DatePicker.RangePicker />
  </div>
</ConfigProvider>

// RTL direction
<ConfigProvider direction="rtl">
  <div className="App">
    <Button type="primary">Primary</Button>
    <Input placeholder="Please Input" />
  </div>
</ConfigProvider>

// Size configuration
<ConfigProvider componentSize="large">
  <div className="App">
    <Button type="primary">Primary</Button>
    <Input placeholder="Please Input" />
    <DatePicker />
  </div>
</ConfigProvider>

// Disabled state
<ConfigProvider disabled>
  <div className="App">
    <Button type="primary">Primary</Button>
    <Input placeholder="Please Input" />
    <DatePicker />
  </div>
</ConfigProvider>

// Custom prefix
<ConfigProvider prefixCls="my-ant">
  <div className="App">
    <Button type="primary">Primary</Button>
  </div>
</ConfigProvider>

// Form configuration
<ConfigProvider
  form={{
    validateMessages: {
      required: "${label} is required!",
      types: {
        email: "${label} is not a valid email!",
        number: "${label} is not a valid number!",
      },
      number: {
        range: "${label} must be between ${min} and ${max}",
      },
    },
  }}
>
  <Form>
    <Form.Item label="Email" name="email" rules={[{ required: true, type: "email" }]}>
      <Input />
    </Form.Item>
  </Form>
</ConfigProvider>

Theme System

Comprehensive theming system with design tokens, algorithms, and customization capabilities.

interface ThemeConfig {
  token?: Partial<AliasToken>;
  components?: OverrideToken;
  algorithm?: MappingAlgorithm | MappingAlgorithm[];
  hashed?: boolean;
  inherit?: boolean;
  cssVar?: boolean | CSSVarConfig;
}

interface GlobalToken {
  // Motion
  motionBase: number;
  motionUnit: number;
  motionEaseOutCirc: string;
  motionEaseInOutCirc: string;
  motionEaseOut: string;
  motionEaseInOut: string;
  motionEaseOutBack: string;
  motionEaseInBack: string;
  motionEaseInQuint: string;
  motionEaseOutQuint: string;
  
  // Colors
  colorPrimary: string;
  colorSuccess: string;
  colorWarning: string;
  colorError: string;
  colorInfo: string;
  colorLink: string;
  colorTextBase: string;
  colorBgBase: string;
  
  // Font
  fontFamily: string;
  fontSize: number;
  fontSizeLG: number;
  fontSizeSM: number;
  fontSizeXL: number;
  fontWeight: number;
  
  // Line height
  lineHeight: number;
  lineHeightLG: number;
  lineHeightSM: number;
  
  // Border radius
  borderRadius: number;
  borderRadiusLG: number;
  borderRadiusSM: number;
  borderRadiusXS: number;
  
  // Control
  controlHeight: number;
  controlHeightSM: number;
  controlHeightLG: number;
  controlHeightXS: number;
  
  // Size
  sizeUnit: number;
  sizeStep: number;
  sizePopupArrow: number;
  
  // zIndex
  zIndexBase: number;
  zIndexPopupBase: number;
  
  // Opacity
  opacityLoading: number;
  
  // Wireframe
  wireframe: boolean;
  
  // And many more design tokens...
}

type MappingAlgorithm = (seedToken: SeedToken, mapToken?: Partial<MapToken>) => MapToken;

interface ThemeInstance {
  useToken: () => {
    theme: any;
    token: GlobalToken;
    hashId: string;
  };
  defaultAlgorithm: MappingAlgorithm;
  darkAlgorithm: MappingAlgorithm;
  compactAlgorithm: MappingAlgorithm;
  getDesignToken: (config?: DesignTokenConfig) => GlobalToken;
  defaultSeed: SeedToken;
}

declare const theme: ThemeInstance;

Usage Examples:

import { theme, ConfigProvider, Button, Space } from "antd";

// Using theme hook
const MyComponent = () => {
  const { token } = theme.useToken();
  
  return (
    <div style={{ backgroundColor: token.colorBgContainer, padding: token.padding }}>
      <Button type="primary" style={{ borderRadius: token.borderRadiusLG }}>
        Custom Button
      </Button>
    </div>
  );
};

// Custom algorithm
const customAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
  return {
    ...theme.defaultAlgorithm(seedToken, mapToken),
    colorPrimary: "#722ed1",
  };
};

<ConfigProvider
  theme={{
    algorithm: customAlgorithm,
  }}
>
  <MyComponent />
</ConfigProvider>

// Multiple algorithms
<ConfigProvider
  theme={{
    algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
  }}
>
  <MyComponent />
</ConfigProvider>

// Custom design tokens
<ConfigProvider
  theme={{
    token: {
      colorPrimary: "#722ed1",
      borderRadius: 8,
      wireframe: false,
    },
  }}
>
  <MyComponent />
</ConfigProvider>

// CSS variables
<ConfigProvider
  theme={{
    cssVar: true,
    hashed: false,
  }}
>
  <MyComponent />
</ConfigProvider>

// Get design tokens programmatically
const designTokens = theme.getDesignToken({
  token: {
    colorPrimary: "#1890ff",
  },
  algorithm: theme.darkAlgorithm,
});

console.log("Primary color:", designTokens.colorPrimary);

App Component

Application wrapper component that enables static function calls and provides application-level configuration.

interface AppProps {
  children?: React.ReactNode;
  className?: string;
  message?: MessageConfig;
  notification?: NotificationConfig;
}

interface AppRef {
  message: MessageInstance;
  notification: NotificationInstance;
  modal: Omit<ModalStaticFunctions, "warn">;
}

declare const App: React.ForwardRefExoticComponent<AppProps & React.RefAttributes<AppRef>> & {
  useApp: () => {
    message: MessageInstance;
    notification: NotificationInstance;
    modal: Omit<ModalStaticFunctions, "warn">;
  };
};

Usage Examples:

import { App, Button, Space } from "antd";

// Basic App wrapper
<App>
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
</App>

// Using App hook for static calls
const MyComponent = () => {
  const { message, notification, modal } = App.useApp();

  const showMessage = () => {
    message.success("Success message from hook!");
  };

  const showNotification = () => {
    notification.info({
      message: "Notification",
      description: "This is a notification from hook!",
    });
  };

  const showModal = () => {
    modal.confirm({
      title: "Confirm",
      content: "This is a modal from hook!",
      onOk: () => console.log("OK"),
    });
  };

  return (
    <Space>
      <Button onClick={showMessage}>Show Message</Button>
      <Button onClick={showNotification}>Show Notification</Button>
      <Button onClick={showModal}>Show Modal</Button>
    </Space>
  );
};

// App with configuration
<App
  message={{
    maxCount: 3,
    duration: 2,
  }}
  notification={{
    placement: "topRight",
    stack: { threshold: 3 },
  }}
>
  <MyComponent />
</App>

// Combined with ConfigProvider
<ConfigProvider
  theme={{
    algorithm: theme.darkAlgorithm,
  }}
>
  <App>
    <MyComponent />
  </App>
</ConfigProvider>

Internationalization

Comprehensive internationalization support with 70+ built-in locales and custom locale configuration.

interface Locale {
  locale: string;
  Pagination?: PaginationLocale;
  DatePicker?: DatePickerLocale;
  TimePicker?: Record<string, any>;
  Calendar?: Record<string, any>;
  Table?: TableLocale;
  Modal?: ModalLocale;
  Tour?: TourLocale;
  Popconfirm?: PopconfirmLocale;
  Transfer?: TransferLocale;
  Select?: Record<string, any>;
  Upload?: UploadLocale;
  Empty?: TransferLocaleForEmpty;
  global?: {
    placeholder?: string;
    close?: string;
  };
  Icon?: Record<string, any>;
  Text?: {
    edit?: any;
    copy?: any;
    copied?: any;
    expand?: any;
    collapse?: any;
  };
  Form?: {
    optional?: string;
    defaultValidateMessages: ValidateMessages;
  };
  Image?: {
    preview: string;
  };
  QRCode?: {
    expired?: string;
    refresh?: string;
    scanned?: string;
  };
  ColorPicker?: {
    presetEmpty: string;
    transparent: string;
    singleColor: string;
    gradientColor: string;
  };
}

// Hook for accessing locale context
declare const useLocale: (componentName: string, defaultLocale?: Function | (() => object)) => [object];

Usage Examples:

import { ConfigProvider, DatePicker, Pagination, Button } from "antd";
// Import locale data
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import frFR from "antd/locale/fr_FR";
import esES from "antd/locale/es_ES";
import ruRU from "antd/locale/ru_RU";
import jaJP from "antd/locale/ja_JP";
import koKR from "antd/locale/ko_KR";
import deDE from "antd/locale/de_DE";
import itIT from "antd/locale/it_IT";
import ptBR from "antd/locale/pt_BR";
import arEG from "antd/locale/ar_EG";
import thTH from "antd/locale/th_TH";
import hiIN from "antd/locale/hi_IN";

// Basic locale usage
<ConfigProvider locale={zhCN}>
  <div>
    <DatePicker />
    <Pagination defaultCurrent={1} total={50} showSizeChanger />
  </div>
</ConfigProvider>

// Locale switching
const [locale, setLocale] = useState(enUS);

const changeLocale = (localeValue: any) => {
  setLocale(localeValue);
};

<ConfigProvider locale={locale}>
  <div>
    <Space>
      <Button onClick={() => changeLocale(enUS)}>English</Button>
      <Button onClick={() => changeLocale(zhCN)}>中文</Button>
      <Button onClick={() => changeLocale(frFR)}>Français</Button>
      <Button onClick={() => changeLocale(jaJP)}>日本語</Button>
    </Space>
    <Divider />
    <DatePicker />
    <Pagination defaultCurrent={1} total={50} showSizeChanger />
  </div>
</ConfigProvider>

// Custom locale
const customLocale = {
  locale: "en",
  Pagination: {
    items_per_page: "/ page",
    jump_to: "Go to",
    jump_to_confirm: "confirm",
    page: "",
    prev_page: "Previous Page",
    next_page: "Next Page",
    prev_5: "Previous 5 Pages",
    next_5: "Next 5 Pages",
    prev_3: "Previous 3 Pages",
    next_3: "Next 3 Pages",
    page_size: "Page Size",
  },
  DatePicker: {
    lang: {
      placeholder: "Select date",
      yearPlaceholder: "Select year",
      quarterPlaceholder: "Select quarter",
      monthPlaceholder: "Select month",
      weekPlaceholder: "Select week",
      rangePlaceholder: ["Start date", "End date"],
      rangeYearPlaceholder: ["Start year", "End year"],
      rangeQuarterPlaceholder: ["Start quarter", "End quarter"],
      rangeMonthPlaceholder: ["Start month", "End month"],
      rangeWeekPlaceholder: ["Start week", "End week"],
      // ... more date picker translations
    },
    timePickerLocale: {
      placeholder: "Select time",
      rangePlaceholder: ["Start time", "End time"],
    },
  },
  TimePicker: {
    placeholder: "Select time",
    rangePlaceholder: ["Start time", "End time"],
  },
  // ... other component translations
};

<ConfigProvider locale={customLocale}>
  <div>
    <DatePicker />
    <Pagination defaultCurrent={1} total={50} />
  </div>
</ConfigProvider>

// Using locale hook in custom components
import { useLocale } from "antd/locale";

const MyComponent = () => {
  const [locale] = useLocale("MyComponent", () => ({
    placeholder: "Please select",
    confirm: "Confirm",
    cancel: "Cancel",
  }));

  return (
    <div>
      <Button>{locale.confirm}</Button>
      <Button>{locale.cancel}</Button>
    </div>
  );
};

// Available locales (70+ supported)
const availableLocales = {
  "ar_EG": "Arabic (Egypt)",
  "az_AZ": "Azerbaijani",
  "bg_BG": "Bulgarian", 
  "bn_BD": "Bengali (Bangladesh)",
  "by_BY": "Belarusian",
  "ca_ES": "Catalan",
  "cs_CZ": "Czech",
  "da_DK": "Danish",
  "de_DE": "German",
  "el_GR": "Greek",
  "en_GB": "English (UK)",
  "en_US": "English (US)",
  "es_ES": "Spanish",
  "et_EE": "Estonian",
  "eu_ES": "Basque",
  "fa_IR": "Persian",
  "fi_FI": "Finnish",
  "fr_BE": "French (Belgium)",
  "fr_CA": "French (Canada)", 
  "fr_FR": "French",
  "ga_IE": "Irish",
  "gl_ES": "Galician",
  "he_IL": "Hebrew",
  "hi_IN": "Hindi",
  "hr_HR": "Croatian",
  "hu_HU": "Hungarian",
  "hy_AM": "Armenian",
  "id_ID": "Indonesian",
  "is_IS": "Icelandic",
  "it_IT": "Italian",
  "ja_JP": "Japanese",
  "ka_GE": "Georgian",
  "kk_KZ": "Kazakh",
  "km_KH": "Khmer",
  "kmr_IQ": "Kurdish (Northern)",
  "kn_IN": "Kannada",
  "ko_KR": "Korean",
  "ku_IQ": "Kurdish (Central)",
  "lt_LT": "Lithuanian",
  "lv_LV": "Latvian",
  "mk_MK": "Macedonian",
  "ml_IN": "Malayalam",
  "mn_MN": "Mongolian",
  "ms_MY": "Malay",
  "my_MM": "Myanmar",
  "nb_NO": "Norwegian (Bokmål)",
  "ne_NP": "Nepali",
  "nl_BE": "Dutch (Belgium)",
  "nl_NL": "Dutch",
  "pl_PL": "Polish",
  "pt_BR": "Portuguese (Brazil)",
  "pt_PT": "Portuguese",
  "ro_RO": "Romanian",
  "ru_RU": "Russian",
  "si_LK": "Sinhala",
  "sk_SK": "Slovak",
  "sl_SI": "Slovenian",
  "sr_RS": "Serbian",
  "sv_SE": "Swedish",
  "ta_IN": "Tamil",
  "th_TH": "Thai",
  "tk_TK": "Turkmen",
  "tr_TR": "Turkish",
  "uk_UA": "Ukrainian",
  "ur_PK": "Urdu",
  "uz_UZ": "Uzbek",
  "vi_VN": "Vietnamese",
  "zh_CN": "Chinese (Simplified)",
  "zh_HK": "Chinese (Hong Kong)",
  "zh_TW": "Chinese (Traditional)",
};

Version Information

// Version string
declare const version: string;

// Usage
import { version } from "antd";
console.log("Ant Design version:", version); // e.g., "5.27.0"