Config Provider

Wraps your app to provide global configurations.
  • Enables all primitives to inherit global reading direction.
  • Enables changing the behavior of scroll body when setting body lock.
  • Much more controls to prevent layout shifts.

Anatomy

Import the component.

<script setup lang="ts">
import { AConfigProvider } from 'akar';
</script>

<template>
  <AConfigProvider>
    <slot />
  </AConfigProvider>
</template>

API Reference

Config Provider

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the AConfigProvider component to ensure all of the primitives adjust their behavior based on the dir prop.

You can also change the global behavior of bodylock for components such as AAlert, ADropdownMenu and etc to fit your layout to prevent any content shifts.

Props

Prop Default Type
dir'ltr''ltr' | 'rtl'

The global reading direction of your application. This will be inherited by all primitives.

locale'en'string

The global locale of your application. This will be inherited by all primitives.

noncestring

The global nonce value of your application. This will be inherited by the related primitives.

scrollBodytrueboolean | ScrollBodyOption

The global scroll body behavior of your application. This will be inherited by the related primitives.

useId(() => string)

The global useId injection as a workaround for preventing hydration issue.

Example

Use the config provider.

Set global direction to rtl, and scroll body behavior to false (will not set any padding/margin).

<script setup lang="ts">
import { AConfigProvider } from 'akar';
</script>

<template>
  <AConfigProvider
    dir="rtl"
    :scroll-body="false"
  >
    <slot />
  </AConfigProvider>
</template>

Focus Scope

Manages focus within a component boundary with support for trapping and looping focus navigation.