Localization

Every Bloxa component speaks Turkish and English out of the box. Wrap your app once and labels, placeholders, dates and numbers follow the locale.

Try it

Switch the language: placeholders, buttons, month names, number formats and error messages update together. German is added through messages.

Dosyaları buraya bırak ya da seç

Set up

Install the provider and wrap your app. Without a provider, components fall back to English.

Terminal

npx shadcn@latest add @bloxa/bloxa-provider

app/layout.tsx

// app/layout.tsx
import { BloxaProvider } from "@/components/ui/bloxa-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        <BloxaProvider locale="tr-TR">{children}</BloxaProvider>
      </body>
    </html>
  );
}

Change any text

Pass only the strings you want to change; the rest come from the built-in language.

layout.tsx

<BloxaProvider
  locale="tr-TR"
  messages={{
    noResults: "Aradığın bulunamadı",
    datePlaceholder: "Randevu tarihi seç",
  }}
>
  {children}
</BloxaProvider>

Add a language

Provide the strings for a new language with messages. Dates, numbers and sorting already use the locale through Intl.

layout.tsx

import { BloxaProvider, type BloxaMessages } from "@/components/ui/bloxa-provider";

const de: Partial<BloxaMessages> = {
  search: "Suchen…",
  noResults: "Keine Ergebnisse",
  datePlaceholder: "Datum wählen",
  remove: (label) => `${label} entfernen`,
};

<BloxaProvider locale="de-DE" messages={de}>{children}</BloxaProvider>