Arcade Provider

Arcade utility is a global context provider that provides all of our and your components with shared context.


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

Arcade provider is used to define your root theme of the application. By passing a theme to the Arcade provider – your app will get access to all design tokens available in the system.

Color mode

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


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

Focus ring management

Arcade component is used for adding a simple :focus-visible like functionality. It lets Arcade display focus ring only when an element on the page is focused using the keyboard. If you want to create your own focusable element that uses this feature, you should use an Actionable utility.