Components

Provider

Sets the language, text direction and motion preference for everything inside it, without changing layout.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Provider } from '@bigbang/ui';
Source: Provider.tsx
Storybook: Provider · Playground

Provider is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

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

<Provider locale="en-GB" direction="ltr">
  <App />
</Provider>;

Props

locale

Description: Language of the library's own strings, such as the loading announcement and the required marker, and the lang of the content inside. Turkish is the source language and the default without a Provider.
Type: 'tr-TR' | 'en-GB'
Default: 'tr-TR'

direction

Description: Text direction of the content inside: sets dir and tells Base UI parts which way arrow keys and popups go. Components use logical properties, so they mirror without other changes.
Type: 'ltr' | 'rtl'
Default: 'ltr'

reducedMotion

Description: 'reduce' turns motion down inside the Provider even when the operating system allows it, as an in-product setting. 'system' follows the operating system. Neither can turn motion back on when the system asks for less (MOT-03).
Type: 'system' | 'reduce'
Default: 'system'

material

Description: Surface material of the chrome inside: the top bar, popups, menus, toasts, toolbars and segmented controls. 'glass' turns them into translucent, blurred glass over the content and mounts the refraction filter once; tables, forms, cards, charts, money fields and tooltips stay solid. Without the prop, a Provider keeps the material of the one around it.
Type: 'solid' | 'glass'
Default: 'solid'

childrenRequired

Description: The part of the app these settings apply to, usually the whole app.
Type: ReactNode

Provider takes no className, style or other attributes.

Data attributes

data-component="provider": on the wrapper <div>.
data-motion="reduce": on the same <div>, only with reducedMotion="reduce".

Theme and brand

Theme and brand are not Provider props. Set them as attributes on an element at the app root.

<html lang="en" data-brand="neutral" data-theme="light">

Motion in JavaScript

CSS tokens reduce motion on their own. Use useReducedMotion() only for animation driven by JavaScript.

import { useReducedMotion } from '@bigbang/ui';

function Chart() {
  const reduce = useReducedMotion();
  return <AnimatedChart duration={reduce ? 0 : 300} />;
}