---
title: "<StackProvider />"
description: A React component that provides Stack context to its children.
---

A React component that provides Stack context to its children.

For detailed usage instructions, please refer to the manual section of the [setup guide](../getting-started/setup).

## Props

| Property | Type | Optional | Description |
|----------|------|----------|-------------|
| `children` | `React.ReactNode` | No | The child components to be wrapped by the StackProvider. |
| `app` | `StackClientApp \| StackServerApp` | No | The Stack app instance to be used. |
| `lang` | `"en-US" \| "de-DE" \| "es-419" \| "es-ES" \| "fr-CA" \| "fr-FR" \| "it-IT" \| "ja-JP" \| "ko-KR" \| "pt-BR" \| "pt-PT" \| "zh-CN" \| "zh-TW"` | Yes | The language to be used for translations. |
| `translationOverrides` | `Record<string, string>` | Yes | A mapping of English translations to translated equivalents. These will take priority over the translations from the language specified in the lang property. Note that the keys are case-sensitive. You can find a full list of supported strings on GitHub. |

## Example

```tsx title="layout.tsx"
import { StackProvider } from '@stackframe/stack';
import { stackServerApp } from '@/stack/server';

function App() {
  return (
    <StackProvider
      app={stackServerApp}
      lang="de-DE"
      translationOverrides={{
        "Sign in": "Einloggen",
        "Sign In": "Einloggen",
      }}
    >
      {/* Your app content */}
    </StackProvider>
  );
}
```