Provider

When to use

Use Provider to give the language, text direction and motion preference of an app, or part of it, in one place. In most apps, a single Provider wraps the app root.

When not to use

• To pick a theme or brand: Theme and brand are not Provider props; set data-theme and data-brand attributes on the app root.
• For app copy: Provider translates only the library’s own strings (ui.*); screen titles and labels are the app’s job.
• Around every component: Do not repeat the same setting; a single Provider is enough unless one area differs.

Anatomy

Primary buttonLoading

LightDark

Copy code

import { Button, Provider } from '@bigbang/ui';

export default function Locale() {
  return (
    <Provider locale="en-GB">
      <Button loading>Primary button</Button>
    </Provider>
  );
}

1. Wrapper: One <div> with display: contents; the lang, dir and data-motion attributes sit on it. It creates no box and does not change layout.
2. Content: children; the settings apply to this area and everything below it.

Behaviour

• The locale default is tr-TR, direction is ltr, reducedMotion is system. The library also works in Turkish without a Provider.
• locale: tr-TR or en-GB. It sets the library strings (loading, done, required, optional) and the lang of the wrapper.
• direction: sets dir on the wrapper and feeds Base UI’s DirectionProvider; arrow keys and popups follow the direction.
• reducedMotion="reduce": sets data-motion="reduce" on the wrapper. The token CSS switches to reduced values and useReducedMotion() returns true.
• reducedMotion="system" leaves motion to the operating system. Neither can turn motion back on: a nested Provider does not undo an outer reduce.
• Language and direction come from the nearest Provider; a nested Provider changes them only for its own area.

Guidelines

Use a single Provider

Set it once at the app root. If one area differs, wrap only that area.

Primary buttonSecondary button

DoOne Provider covers all the content.

Primary button

Secondary button

Don'tEach button has its own Provider; the same setting repeats.

Match the app language to the library language

locale changes the library strings, not the app strings. Provide the app’s own copy in the same language.

Content

• locale is a language tag: tr-TR, en-GB. Another language needs a string catalogue added to the library.
• Library strings stay short: “Loading”, “Done”, “required”, “optional”.
• To change the text of one component, use its own prop (such as loadingLabel); Provider changes the whole area.

String	tr-TR	en-GB
ui.button.loading	Yükleniyor	Loading
ui.button.success	Tamamlandı	Done
ui.field.required	zorunlu	required
ui.field.optional	isteğe bağlı	optional

Material

material="glass" turns the chrome inside into glass: the top bar, popups, menus, toasts, toolbars and segmented controls. Tables, forms, cards, charts, money fields, tooltips and the page background stay solid. The default is solid. A Provider without the prop keeps the material of the one around it, and a nested material="solid" keeps its part of the page solid. When the system asks for reduced transparency the Provider renders solid. See Material.

Related components

• Button: Reads its loading and done texts from the Provider’s language.
• Icon: Icons that follow the reading direction flip under dir="rtl".
• Box: Provider gives no layout; use Box, Stack and Grid for layout.