Locale Provider

A context provider component that sets the locale for child components. Automatically determines text direction (LTR/RTL) based on the locale and provides locale context to formatting utilities.

Anatomy

<script>
  import { LocaleProvider } from "@saas-ui/svelte/utilities/locale-provider";
  import { FormatNumber } from "@saas-ui/svelte/utilities/format-number";
</script>

<!-- Wrap your app with LocaleProvider -->
<LocaleProvider locale="en-US">
  <FormatNumber value={1234.56} />
</LocaleProvider>

<!-- RTL locale support -->
<LocaleProvider locale="ar-SA">
  <FormatNumber value={1234.56} />
</LocaleProvider>

Examples

Basic Accessibility

Basic usage showing how LocaleProvider sets the locale context for child components.

<LocaleProvider {locale}>
	<Stack gap={2}>
		<LocaleDisplay />
		<Text size="sm" class="text-fg-muted"
			>Number formatting (locale affects separators):</Text>
		<Text size="lg">
			<FormatNumber value={1234567.89} />
		</Text>
		<Text size="sm" class="text-fg-muted"
			>Date: {new Date().toLocaleDateString(locale)}</Text>
	</Stack>
</LocaleProvider>

Setting Locale Accessibility

Demonstrates how changing the locale affects formatting and text direction throughout the component tree.

<Stack class="max-w-md">
	<div>
		<Text size="md" weight="medium" class="mb-2">English (US)</Text>
		<LocaleProvider locale="en-US">
			<Text size="lg">
				<FormatNumber
					value={1234.56}
					style="currency"
					currency="USD"
				/>
			</Text>
		</LocaleProvider>
	</div>

	<div>
		<Text size="md" weight="medium" class="mb-2">German (Germany)</Text>
		<LocaleProvider locale="de-DE">
			<Text size="lg">
				<FormatNumber
					value={1234.56}
					style="currency"
					currency="EUR"
				/>
			</Text>
		</LocaleProvider>
	</div>

	<div>
		<Text size="md" weight="medium" class="mb-2">Arabic (Bahrain)</Text>
		<LocaleProvider locale="ar-BH">
			<Text size="lg">
				<FormatNumber
					value={1234.56}
					style="currency"
					currency="BHD"
				/>
			</Text>
		</LocaleProvider>
	</div>
</Stack>

Props

Prop	Type	Default	Description
`locale`	`text`	`en-US`	The locale to use for the application.
`children`	`any`	-	The content to be rendered inside the component.