diff --git a/bun.lockb b/bun.lockb
index 5ea8f7a740..6de47d2642 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 2806e5180e..331b738059 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -22,6 +22,10 @@
       "types": "./src/lib/index.ts",
       "svelte": "./src/lib/index.ts"
     },
+    "./locale": {
+      "types": "./src/lib/providers/locale/index.ts",
+      "svelte": "./src/lib/providers/locale/index.ts"
+    },
     "./*": {
       "types": "./src/lib/components/*/index.ts",
       "svelte": "./src/lib/components/*/index.ts"
@@ -42,6 +46,8 @@
     "replace": {
       "exports.\\..svelte": "./dist/index.js",
       "exports.\\..types": "./dist/index.d.ts",
+      "exports.\\./locale.svelte": "./dist/providers/locale/index.js",
+      "exports.\\./locale.types": "./dist/providers/locale/index.d.ts",
       "exports.\\./*.svelte": "./dist/components/*/index.js",
       "exports.\\./*.types": "./dist/components/*/index.d.ts"
     }
@@ -53,6 +59,7 @@
   "dependencies": {
     "@zag-js/avatar": "0.77.1",
     "@zag-js/core": "0.77.1",
+    "@zag-js/i18n-utils": "0.77.1",
     "@zag-js/svelte": "0.77.1",
     "nanoid": "5.0.9"
   },
diff --git a/packages/svelte/src/lib/components/avatar/examples/basic.svelte b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
index b4b5c32a6b..de0faba0e7 100644
--- a/packages/svelte/src/lib/components/avatar/examples/basic.svelte
+++ b/packages/svelte/src/lib/components/avatar/examples/basic.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-  import { Avatar } from '@ark-ui/svelte/avatar'
+import { LocaleProvider } from '$lib/providers'
+import { Avatar } from '@ark-ui/svelte/avatar'
 </script>
 
+<LocaleProvider locale="de-DE">
 <Avatar.Root>
   <Avatar.Fallback>PA</Avatar.Fallback>
   <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
 </Avatar.Root>
+</LocaleProvider>
diff --git a/packages/svelte/src/lib/components/avatar/use-avatar-context.ts b/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
index aebd6fd0e1..6de9c72969 100644
--- a/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
+++ b/packages/svelte/src/lib/components/avatar/use-avatar-context.ts
@@ -2,4 +2,6 @@ import { createContext } from '$lib/utils/create-context'
 import type { UseAvatarReturn } from './use-avatar.svelte'
 
 export interface UseAvatarContext extends UseAvatarReturn {}
-export const [AvatarProvider, useAvatarContext] = createContext<UseAvatarContext>('AvatarContext')
+export const [AvatarProvider, useAvatarContext] = createContext<UseAvatarContext>({
+  key: 'AvatarContext',
+})
diff --git a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts b/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
index 45fa66f7ca..a717cf26b5 100644
--- a/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
+++ b/packages/svelte/src/lib/components/avatar/use-avatar.svelte.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_LOCALE, useLocaleContext } from '$lib/providers/locale'
 import type { Accessor, Optional } from '$lib/types'
 import { createId } from '$lib/utils/create-id'
 import * as avatar from '@zag-js/avatar'
@@ -8,8 +9,10 @@ export interface UseAvatarProps
 export interface UseAvatarReturn extends Accessor<avatar.Api<PropTypes>> {}
 
 export const useAvatar = (props: UseAvatarProps = {}) => {
+  const { dir } = useLocaleContext(DEFAULT_LOCALE)
   const context = $derived({
     id: createId(),
+    dir,
     ...props,
   })
 
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index cb64ac1b52..6d63b651ae 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -1 +1,3 @@
 export * from './components'
+export * from './providers'
+export type { Assign, Optional } from './types'
diff --git a/packages/svelte/src/lib/providers/index.ts b/packages/svelte/src/lib/providers/index.ts
new file mode 100644
index 0000000000..1e26053c0c
--- /dev/null
+++ b/packages/svelte/src/lib/providers/index.ts
@@ -0,0 +1 @@
+export * from './locale'
diff --git a/packages/svelte/src/lib/providers/locale/examples/basic.svelte b/packages/svelte/src/lib/providers/locale/examples/basic.svelte
new file mode 100644
index 0000000000..8f545feb39
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/examples/basic.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { LocaleProvider } from '@ark-ui/svelte/locale'
+import Usage from './usage.svelte'
+</script>
+
+<LocaleProvider locale="ar-BH">
+  <Usage />
+</LocaleProvider>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/examples/setup.svelte b/packages/svelte/src/lib/providers/locale/examples/setup.svelte
new file mode 100644
index 0000000000..b6730b02b8
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/examples/setup.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+import { LocaleProvider } from '@ark-ui/svelte/locale'
+</script>
+
+<LocaleProvider locale="de-DE"> <!-- Your App --></LocaleProvider>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/examples/usage.svelte b/packages/svelte/src/lib/providers/locale/examples/usage.svelte
new file mode 100644
index 0000000000..834289c050
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/examples/usage.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { useLocaleContext } from '@ark-ui/svelte/locale'
+
+const locale = useLocaleContext()
+</script>
+
+<pre>{JSON.stringify(locale, null, 2)}</pre>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/index.ts b/packages/svelte/src/lib/providers/locale/index.ts
new file mode 100644
index 0000000000..074a1a1c15
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/index.ts
@@ -0,0 +1,2 @@
+export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.svelte'
+export { DEFAULT_LOCALE, useLocaleContext, type UseLocaleContext } from './use-locale-context'
diff --git a/packages/svelte/src/lib/providers/locale/locale-provider.svelte b/packages/svelte/src/lib/providers/locale/locale-provider.svelte
new file mode 100644
index 0000000000..461a915a29
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/locale-provider.svelte
@@ -0,0 +1,32 @@
+<script module lang="ts">
+import type { Locale } from '@zag-js/i18n-utils'
+import type { Snippet } from 'svelte'
+
+export interface LocaleProviderProps {
+  /**
+   * The locale to use for the application.
+   * @default 'en-US'
+   */
+  locale: string
+  /**
+   * The children to render.
+   */
+  children: Snippet
+}
+</script>
+
+<script lang="ts">
+import { isRTL } from '@zag-js/i18n-utils'
+import { LocaleContextProvider } from './use-locale-context'
+
+let {locale, children}:  LocaleProviderProps = $props()
+
+const context = $state<Locale>({
+  locale,
+  dir: isRTL(locale) ? 'rtl' : 'ltr',
+})
+
+LocaleContextProvider(context)
+</script>
+
+{@render children()}
\ No newline at end of file
diff --git a/packages/svelte/src/lib/providers/locale/locale.stories.ts b/packages/svelte/src/lib/providers/locale/locale.stories.ts
new file mode 100644
index 0000000000..d982e4472a
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/locale.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta } from '@storybook/svelte'
+import BasicExample from './examples/basic.svelte'
+import SetupExample from './examples/setup.svelte'
+
+const meta = {
+  title: 'Providers / Locale',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    Component: BasicExample,
+  }),
+}
+
+export const Setup = {
+  render: () => ({
+    Component: SetupExample,
+  }),
+}
diff --git a/packages/svelte/src/lib/providers/locale/use-locale-context.ts b/packages/svelte/src/lib/providers/locale/use-locale-context.ts
new file mode 100644
index 0000000000..2adb69a7a5
--- /dev/null
+++ b/packages/svelte/src/lib/providers/locale/use-locale-context.ts
@@ -0,0 +1,13 @@
+import { createContext } from '$lib/utils/create-context'
+import type { Locale } from '@zag-js/i18n-utils'
+
+export const DEFAULT_LOCALE: Locale = {
+  dir: 'ltr',
+  locale: 'en-US',
+}
+
+export interface UseLocaleContext extends Locale {}
+
+export const [LocaleContextProvider, useLocaleContext] = createContext<UseLocaleContext>({
+  key: 'LocaleContext',
+})
diff --git a/packages/svelte/src/lib/utils/create-context.ts b/packages/svelte/src/lib/utils/create-context.ts
index b22a8928bf..78f0ba0817 100644
--- a/packages/svelte/src/lib/utils/create-context.ts
+++ b/packages/svelte/src/lib/utils/create-context.ts
@@ -1,11 +1,16 @@
 import { getContext, setContext } from 'svelte'
 
+interface CreateContextOptions<T> {
+  key?: string
+}
+
 type CreateContextReturn<T> = [(opts: T) => void, (fallback?: T) => T, symbol]
 
-export const createContext = <T>(id: string) => {
-  const contextId = Symbol(id)
+export const createContext = <T>(options: CreateContextOptions<T>) => {
+  const { key } = options
+  const contextId = Symbol(key)
   const provider = (value: T) => setContext(contextId, value)
-  const consumer = () => getContext(contextId)
+  const consumer = () => getContext<T>(contextId)
 
   return [provider, consumer, contextId] as CreateContextReturn<T>
 }
diff --git a/templates/svelte/svelte-kit/src/lib/avatar.svelte b/templates/svelte/svelte-kit/src/lib/avatar.svelte
index f51ddc91bc..088a9c3ec1 100644
--- a/templates/svelte/svelte-kit/src/lib/avatar.svelte
+++ b/templates/svelte/svelte-kit/src/lib/avatar.svelte
@@ -9,7 +9,7 @@ export interface AvatarProps extends AvatarRootProps {
 </script>
 
 <script lang="ts">
-  let { src, name }: AvatarProps = $props()
+  let { src, name, ...rootProps }: AvatarProps = $props()
 
   const getInitials = $derived(() =>
     name
@@ -21,7 +21,7 @@ export interface AvatarProps extends AvatarRootProps {
   )
 </script>
 
-<Avatar.Root>
+<Avatar.Root {...rootProps}>
   <Avatar.Fallback>{getInitials()}</Avatar.Fallback>
   <Avatar.Image {src} alt={name} />
 </Avatar.Root>