Reshaped provider

Usage

Reshaped should be used once by wrapping your whole application to enable our global event listeners and give you access to the Reshaped context hooks.

Reshaped provider is used to define the root theme of your application. By passing a theme to the Reshaped provider — you will enable access to all design tokens available in the design system.

Color mode

By passing defaultColorMode to Reshaped provider, you can pick light or dark color mode to be used by default.

RTL

Reshaped supports RTL text direction and provides a hook to change that dynamically for the whole application. Reshaped component serves as an entry point to define the default value used in the hook later.

Focus ring management

Reshaped component adds focus management functionality. It lets components display a focus ring only when an element on the page is focused using the keyboard. If you want to create your custom focusable component that uses this feature — use an Actionable utility that handles this automatically.

Properties

Name
Type
theme
string
defaultColorMode
dark
light
defaultRTL
boolean
toastOptions
{ [regionName]: ToastRegionOptions }
children
React.ReactNode
className
Array<
string
undefined
null
false
>
Previous