Languages

Everything a component says is a prop, except a few words of its own chrome: Breadcrumbs names its landmark “Breadcrumb”, a field says “(optional)”, a stepper says which steps are “completed”. Those come in English, and the kit ships them in Spanish too.

Quick path

import { Breadcrumbs } from '@zitdevs/ui';
import * as es from '@zitdevs/ui/labels/es';

<Breadcrumbs items={items} />                        // "Breadcrumb"
<Breadcrumbs items={items} labels={es.breadcrumbs} /> // "Ruta de navegación"
<Breadcrumbs items={items} labels={{ breadcrumbs: 'Fil d’Ariane' }} />

How it works

Every component with words of its own takes labels, a partial set: what you pass replaces the English default word by word.
@zitdevs/ui/labels/es exports each component’s Spanish set, named after the component (es.breadcrumbs); @zitdevs/ui/labels/en the English ones.
No context, no provider: the words travel as a prop, so every component stays a Server Component. Pass them where you render the component, or wrap it once in your app.
The keys are the website dictionary’s (ui.breadcrumbs, ui.optional…), so a page that has its own dictionary hands it over as it is: labels={dictionary.ui}.

Add a language or a word

A component’s words live beside it, in <Name>.labels.ts:

export interface BreadcrumbsLabels {
  /** Names the navigation landmark. */
  breadcrumbs: string;
}

export const breadcrumbsLabels = {
  en: { breadcrumbs: 'Breadcrumb' },
  es: { breadcrumbs: 'Ruta de navegación' },
} as const satisfies LabelSets<BreadcrumbsLabels>;

The component merges labels over breadcrumbsLabels.en. The labels/en and labels/es entries are generated from these files, and a test fails if a set misses a key or leaves a word empty.