Wrap your app with VitalityProvider to enable Vitality's features and shared context.

import { VitalityProvider } from "@vitality-ds/components";

Required: All apps using Vitality must wrap their root component with VitalityProvider. Follow the Getting Started guide for setup details.

<VitalityProvider>
  <App />
</VitalityProvider>

VitalityProvider works out of the box with no extra configuration. However, it also accepts a config prop for global customization.

Use theme.themeOverride to force a default theme ("light" or "dark"), rather than relying on system preferences.

If your app supports theme switching, themeOverride is treated as the initial default only.

const config = {
  theme: {
    themeOverride: "light",
  },
};

<VitalityProvider config={config}>
  <App />
</VitalityProvider>

You can customize the sidebar (e.g. offset from top) via the config.sidebar settings. Learn more in the Sidebar documentation.

Disable individual internal providers to avoid redundant contexts or unexpected styling behaviour, especially in advanced setups (e.g., module federation, nested VitalityProvider instances).

Example: Disable the Sidebar Provider

const config = {
  disableProvider: {
    sidebar: true,
  },
};

<VitalityProvider config={config}>
  <App />
</VitalityProvider>

Example: Disable Theme in a Nested Provider

const config = {
  disableProvider: {
    theme: true,
  },
};

<VitalityProvider>
  <VitalityProvider config={config}>
    <App />
  </VitalityProvider>
</VitalityProvider>

Providers You Can Disable

• theme
• sidebar
• tooltip