Locale Provider
A shadcn-style locale provider utility built with Ark UI primitives.
Localeen-US
Formatted dateApr 16, 2026
Formatted size1.28 MB
Formatted time5:35 PM
Contains "ca"Yes
Sortedapple, cairo, zebra
import { FormatByte, FormatTime } from "@/components/ui/format";
import {
LocaleProvider,
useCollator,
useDateFormatter,
useFilter,
useLocaleContext,
} from "@/components/ui/locale";
const LocalePreview = () => {
const locale = useLocaleContext();
const collator = useCollator({ usage: "sort" });
const formatter = useDateFormatter({ dateStyle: "medium" });
const { contains } = useFilter({ sensitivity: "base" });
const sorted = ["zebra", "apple", "cairo"].slice().sort(collator.compare);
return (
<div className="grid w-full max-w-md gap-3 rounded-xl border border-border bg-card p-4 text-sm">
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Locale</span>
<span className="text-muted-foreground">{locale.locale}</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Formatted date</span>
<span className="text-muted-foreground">
{formatter.format(new Date("2026-04-16T00:00:00.000Z"))}
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Formatted size</span>
<span className="text-muted-foreground">
<FormatByte value={1_280_000} />
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Formatted time</span>
<span className="text-muted-foreground">
<FormatTime
value={new Date("2026-04-16T17:35:00.000Z")}
format="12h"
/>
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Contains "ca"</span>
<span className="text-muted-foreground">
{contains("Cairo", "ca") ? "Yes" : "No"}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="font-medium">Sorted</span>
<span className="text-muted-foreground">{sorted.join(", ")}</span>
</div>
</div>
);
};
const LocaleDemo = () => (
<LocaleProvider locale="en-US">
<LocalePreview />
</LocaleProvider>
);
export default LocaleDemo;
Installation
npx shadcn@latest add @ark-cn/localeInstall the dependency required by this utility:
npm install @ark-ui/reactCopy the utility source into your app:
TSXcomponents/ui/locale.tsx
"use client";
import {
LocaleProvider as LocaleProviderPrimitive,
type LocaleProviderProps as LocaleProviderPrimitiveProps,
useCollator,
useDateFormatter,
useFilter,
useLocaleContext,
} from "@ark-ui/react/locale";
export type LocaleProviderProps = LocaleProviderPrimitiveProps;
export const LocaleProvider = (props: LocaleProviderProps) => (
<LocaleProviderPrimitive {...props} />
);
export type {
UseCollatorProps,
UseDateFormatterProps,
UseFilterProps,
UseFilterReturn,
UseLocaleContext,
} from "@ark-ui/react/locale";
export { useCollator, useDateFormatter, useFilter, useLocaleContext };
Update import aliases to match your project setup.
Usage
import { LocaleProvider, useLocaleContext } from "@/components/ui/locale"Examples
Default
Localeen-US
Formatted dateApr 16, 2026
Formatted size1.28 MB
Formatted time5:35 PM
Contains "ca"Yes
Sortedapple, cairo, zebra
import { FormatByte, FormatTime } from "@/components/ui/format";
import {
LocaleProvider,
useCollator,
useDateFormatter,
useFilter,
useLocaleContext,
} from "@/components/ui/locale";
const LocalePreview = () => {
const locale = useLocaleContext();
const collator = useCollator({ usage: "sort" });
const formatter = useDateFormatter({ dateStyle: "medium" });
const { contains } = useFilter({ sensitivity: "base" });
const sorted = ["zebra", "apple", "cairo"].slice().sort(collator.compare);
return (
<div className="grid w-full max-w-md gap-3 rounded-xl border border-border bg-card p-4 text-sm">
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Locale</span>
<span className="text-muted-foreground">{locale.locale}</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Formatted date</span>
<span className="text-muted-foreground">
{formatter.format(new Date("2026-04-16T00:00:00.000Z"))}
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Formatted size</span>
<span className="text-muted-foreground">
<FormatByte value={1_280_000} />
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Formatted time</span>
<span className="text-muted-foreground">
<FormatTime
value={new Date("2026-04-16T17:35:00.000Z")}
format="12h"
/>
</span>
</div>
<div className="flex items-center justify-between gap-3 border-border border-b pb-3">
<span className="font-medium">Contains "ca"</span>
<span className="text-muted-foreground">
{contains("Cairo", "ca") ? "Yes" : "No"}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="font-medium">Sorted</span>
<span className="text-muted-foreground">{sorted.join(", ")}</span>
</div>
</div>
);
};
const LocaleDemo = () => (
<LocaleProvider locale="en-US">
<LocalePreview />
</LocaleProvider>
);
export default LocaleDemo;
API reference
This utility mirrors Ark UI's locale provider and locale hooks. Use it together with explicit dir="ltr" or dir="rtl" containers when you need layout direction as well as locale-aware formatting.
See the ARK UI documentation for the full API.