Localization 🌏

The locale in the React Suite component defaults to English. If you need to set another locale, you can configure it with <CustomProvider>.


import { CustomProvider } from 'rsuite';
import zhCN from 'rsuite/locales/zh_CN';

return (
  <CustomProvider locale={zhCN}>
    <App />

Supported locales

Locale Description
ar_EG Arabic (Egypt)
cs_CZ Czech
da_DK Danish
de_DE German
en_GB English
en_US American English
es_AR Spanish (Argentina)
es_ES Spanish (Spain)
fa_IR Persian (Iran)
fi_FI Finnish
fr_FR French
hu_HU Hungarian
it_IT Italian
ja_JP Japanese
kk_KZ Kazakh
ko_KR Korean
ne_NP Nepali
nl_NL Dutch
pt_BR Portuguese (Brazil)
ru_RU Russian
sv_SE Swedish
tr_TR Turkish
zh_CN Simplified Chinese
zh_TW traditional Chinese

How to add new language to rsuite?


React Suite is very easy to customize. In general, you should create a locale setting with your customizations.

import enGB from 'date-fns/locale/en-GB';

const Calendar = {
  sunday: 'Su',
  monday: 'Mo',
  tuesday: 'Tu',
  wednesday: 'We',
  thursday: 'Th',
  friday: 'Fr',
  saturday: 'Sa',
  ok: 'OK',
  today: 'Today',
  yesterday: 'Yesterday',
  hours: 'Hours',
  minutes: 'Minutes',
  seconds: 'Seconds',
   * Format of the string is based on Unicode Technical Standard #35:
   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
  formattedMonthPattern: 'MMM yyyy',
  formattedDayPattern: 'dd MMM yyyy',
  dateLocale: enGB

const locale = {
  common: {
    loading: 'Loading...',
    emptyMessage: 'No data found'
  Plaintext: {
    unfilled: 'Unfilled',
    notSelected: 'Not selected',
    notUploaded: 'Not uploaded'
  Pagination: {
    more: 'More',
    prev: 'Previous',
    next: 'Next',
    first: 'First',
    last: 'Last',
    limit: '{0} / page',
    total: 'Total Rows: {0}',
    skip: 'Go to{0}'
  DatePicker: {
  DateRangePicker: {
    last7Days: 'Last 7 Days'
  Picker: {
    noResultsText: 'No results found',
    placeholder: 'Select',
    searchPlaceholder: 'Search',
    checkAll: 'All'
  InputPicker: {
    newItem: 'New item',
    createOption: 'Create option "{0}"'
  Uploader: {
    inited: 'Initial',
    progress: 'Uploading',
    error: 'Error',
    complete: 'Finished',
    emptyFile: 'Empty',
    upload: 'Upload'
  CloseButton: {
    closeLabel: 'Close'
  Breadcrumb: {
    expandText: 'Show path'
  Toggle: {
    on: 'Open',
    off: 'Close'

return (
  <CustomProvider locale={locale}>
    <App />

Component localization

If you only want to adjust the localized text of the component, you can directly customize it through the locale property of the component. Take the Table component as an example:

const locale = {
  emptyMessage: 'No data found.',
  loading: 'Loading, please wait.'

return <Table locale={locale} />;
type BreadcrumbLocaleType = {
  expandText?: string;



type CalendarLocaleType = {
  sunday?: string;
  monday?: string;
  tuesday?: string;
  wednesday?: string;
  thursday?: string;
  friday?: string;
  saturday?: string;
  ok?: string;
  today?: string;
  yesterday?: string;
  hours?: string;
  minutes?: string;
  seconds?: string;
  formattedMonthPattern?: string;
  formattedDayPattern?: string;

  // for DateRangePicker
  last7Days?: string;


type PaginationLocale = {
  more?: string;
  prev?: string;
  next?: string;
  first?: string;
  last?: string;
  limit?: string;
  total?: string;
  skip?: string;



type PickerLocaleType = {
  noResultsText?: string;
  placeholder?: string;
  searchPlaceholder?: string;
  loading?: string;
  emptyMessage?: string;

  // for CheckTreePicker, MultiCascader
  checkAll?: string;

  // for InputPicker
  newItem?: string;
  createOption?: string;


type UploaderLocaleType = {
  inited?: string;
  progress?: string;
  error?: string;
  complete?: string;
  emptyFile?: string;
  upload?: string;


type TableLocaleType = {
  emptyMessage?: string;
  loading?: string;


type ToggleLocaleType = {
  on?: string;
  off?: string;

Used with react-intl

import { IntlProvider } from 'react-intl';
import { CustomProvider } from 'rsuite';
import zhCN from 'rsuite/locales/zh_CN';

return (
  <IntlProvider locale="zh">
    <CustomProvider locale={zhCN}>
      <App />

More Configuration references: react-intl

Vercel banner