Reshaped provider

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.

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

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

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 supports theme and defaultTheme properties to let you apply a custom theme and switch between themes.

defaultTheme is responsible for the uncontrolled theming behavior. It means that only the initial value of the property is going to be used by the app. All updates to the used theme will then be picked up from 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} />;

theme 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 Reshaped provider, you can pick 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 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.

<Reshaped defaultRTL={true} />

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.