UI strings

bunx shadcn@latest add @nalarx/ui-strings

Some text sits where a caller never sees it: a skeleton's busy label, a dialog's default buttons, a toast's dismiss button. Items read it from useUIStrings(), so an app wires its translations once instead of passing a label to every instance.

Without a providerCopy Anchor Link

Everything is English (DEFAULT_UI_STRINGS). The Platform app needs nothing.

With a providerCopy Anchor Link

Put one client component near the root that maps the app's i18n to UIStrings. Keys you leave out stay English.

"use client";
import { UIStringsProvider } from "@/components/ui/nx/UIStrings";
import { useTranslation } from "@/hooks/shared/i18n/useTranslation";

export function UIStringsBridge({ children }: { children: React.ReactNode }) {
  const { t, language } = useTranslation();
  return (
    <UIStringsProvider
      strings={{
        locale: language === "id" ? "id-ID" : "en-US",
        close: t("ui.close"),
        loading: t("ui.loading"),
        // …
      }}
    >
      {children}
    </UIStringsProvider>
  );
}

The same reader outside a provider, then inside one that sets close and retry:

PrecedenceCopy Anchor Link

A prop on the component (ariaLabel, retryLabel, placeholder…) wins, then the provider, then the English default.

StringsCopy Anchor Link