Skip to content
UI Brok

Loading…

No results

Browse catalog

Localization (i18n)

Brok components are translation-ready the moment you copy them in. User-facing labels are already wrapped in Laravel's __() helper, and every primitive is authored with CSS logical properties — so the same copied markup serves any language, and flips for right-to-left scripts with a single dir attribute. There is no extra package, no build step, and nothing to re-generate: you add translation lines and, optionally, set the document direction.

What you get for free

  • Strings call __(). Visible labels in the components ship wrapped in the translation helper, so a matching lang line is all it takes to swap the copy per locale.
  • Logical properties mirror under RTL. Spacing, alignment and position use ms/me, ps/pe, start/end and text-start/text-end — set dir="rtl" and the layout flips automatically. See the RTL guide for the full mechanics.
  • No runtime dependency. The copied code is plain Blade — it uses your app's existing locale, lang files and any locale-switching package you already run.

Localize a copied component

Because the labels already call __(), localizing is just standard Laravel translation work.

Set the application locale

Configure your default in config/app.php (the APP_LOCALE env var), or switch it per request with App::setLocale($locale) in middleware.

Add a translation line

Drop the key the component uses into your lang/<locale>/*.php file. A component that renders {{ __('Save changes') }} just needs that string keyed in each locale.
lang/es/messages.php PHP 
// lang/es/messages.php
return [
    'Save changes' => 'Guardar cambios',
    'Search…'      => 'Buscar…',
];

Pass dynamic copy through the translator

When you customise a copied component, keep visible strings wrapped so they stay translatable. Use placeholders for interpolated values instead of concatenating.
resources/views/components/ui/cart.blade.php Blade 
{{-- In a copied component --}}
<h2>{{ __('Welcome back') }}</h2>
<p>{{ __(':count items in your cart', ['count' => $count]) }}</p>

Flip direction for RTL languages

Arabic, Hebrew, Persian and Urdu read right-to-left. Set the document dir alongside lang and every component mirrors — no per-component work, because they are built on logical properties.

resources/views/layouts/app.blade.php Blade 
{{-- Drive lang + dir from the active locale --}}
@php($rtl = in_array(app()->getLocale(), ['ar', 'he', 'fa', 'ur'], true))
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $rtl ? 'rtl' : 'ltr' }}">

This is exactly how the Brok docs site itself wires its <html> tag — the layout reads app()->getLocale() and resolves dir from it. You can also scope direction to a subtree (a single RTL widget on an otherwise LTR page) by setting dir="rtl" on a wrapping element.

Gotchas

Note

Translate the strings you add, too. The shipped labels are wrapped for you, but any copy you introduce while editing a component is yours to wrap. Run php artisan lang:publish if you want Laravel's stock validation/auth lang files as a starting point.

Note

Keep directional icons mirrored. Logical properties handle layout, but chevrons and arrows are shapes — add rtl:-scale-x-100 so they point the right way. The RTL guide covers this and the numbers/code-stay-LTR rule in depth.

Warning

Don't hardcode copy back in. When you fork a component's markup, resist inlining literal text — wrap it in __() so a future locale doesn't require a second edit pass.