# BitsConfig Documentation A global context provider for configuring default props across all Bits UI components. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ## Overview `BitsConfig` is a global context provider that simplifies managing default prop values across all Bits UI components within its scope. Use it to set defaults like portal targets or locales centrally, and avoid the need to pass the same props to every component. ## Key Features - **Scoped defaults**: Applies defaults only to components within its scope. - **Inheritance**: Child `BitsConfig` instances inherit parent values and can selectively override them. - **Fallback resolution**: Automatically resolves values through the hierarchy of configs. ## Basic Usage Configure default props at the top level: ```svelte Open Dialog Dialog Title Dialog content here ``` ## Inheritance & Overrides Child instances inherit and override parent values: ```svelte

Main dialog Hover me Tooltip content Nested dialog ``` ## Real-world Examples ### Global Defaults Set app-wide defaults at the root layout: +layout.svelte ```svelte {@render children()} ``` ### Theme-specific Configuration Different portal targets for distinct UI regions: ```svelte

``` ### Route-specific Locales Apply specific locales for certain routes: routes/(admin)/+layout.svelte ```svelte {@render children()} ``` ## Component-level Overrides Individual components can override global defaults: ```svelte Uses #main-portal Uses #special-portal ``` ## Value Resolution Order Bits UI resolves default values in this priority: 1. **Direct Component prop** 2. **Nearest parent BitsConfig** 3. **Inherited from parent BitsConfig(s)** 4. **Built-in component default** (e.g., portals default to `"body"`, locales default to `"en"`) ## API Reference ### BitsConfig A global context provider for configuring default props across all Bits UI components. | Property | Type | Description | Details | | ----------------- | --------------------------- | ------------------------------------------------------------------------------------------ | ------- | | `defaultPortalTo` | `union` - Element \| string | Where to render the content when it is open. Defaults to the body.`Default: document.body` | | | `defaultLocale` | `string` | The default locale to use for the app.`Default: en` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | [Previous Tooltip](/docs/components/tooltip) [Next IsUsingKeyboard](/docs/utilities/is-using-keyboard)

bits-config