Reshaped provider

Reshaped provider should be used once by wrapping your entire application to enable our global event listeners and provide access to the Reshaped context hooks.

import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

const App = () => {
  return <Reshaped>My application</Reshaped>;
};

The 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.

Reshaped provider supports theme and defaultTheme properties to let you apply a custom theme and switch between themes.

defaultTheme is responsible for the uncontrolled theming behavior. This means that only the initial value of the property is used by the app. All updates to the theme will then be managed using the setTheme method from the useTheme hook.

<Reshaped defaultTheme="reshaped" />

// Later, inside the application code
const { setTheme } = useTheme();

return <Button onClick={() => setTheme('classic')} icon={ThemeSwitch} />;

The theme property is responsible for the controlled theming behavior. It stops reacting to the setTheme method and instead always listens to the property value you pass to the Reshaped provider.

<Reshaped theme="reshaped">

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

import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

const App = () => {
  return (
    <Reshaped theme="reshaped" defaultColorMode="dark">
      My application
    </Reshaped>
  );
};

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

<Reshaped defaultRTL={true} />

Reshaped provider 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 a custom focusable component that uses this feature, use the Actionable utility, which handles this automatically.