Getting Started

Internationalization

NexubProvider sets the locale, text direction and built-in strings for every @nexub/react component. It is optional: without it, components use English strings, left-to-right layout and the user’s own locale for number and date formatting.

NexubProvider

import { NexubProvider, type NexubMessages } from '@nexub/react';

const ar: Partial<NexubMessages> = {
  close: 'إغلاق',
  undo: 'تراجع',
  goToPage: (page) => `الانتقال إلى الصفحة ${page}`,
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <NexubProvider locale="ar" messages={ar}>
          {children}
        </NexubProvider>
      </body>
    </html>
  );
}

The provider wraps Radix’s DirectionProvider, so menus, sliders, tabs and other Radix primitives follow dir for keyboard arrows and placement. It does not touch <html>: set lang and dir there yourself, where your app renders it, so the page, screen readers and the CSS rtl: variants agree with the provider.

useLocale() returns the active { locale, dir }, and useNexubMessages() the merged strings, for your own components.

Right-to-left

Components use logical properties (ms-, pe-, start, border-s), so padding, borders and alignment flip with dir. Directional icons, such as the chevrons in Pagination, Breadcrumb and menus, mirror under dir="rtl"; the Switch thumb and Toast slide-in reverse too.

Drawer’s side stays physical: side="left" is the left edge in both directions. Pick the side from dir if you want the drawer to follow reading order.

Message keys

Every user-facing default string in @nexub/react. Function keys take a value and return the string, so plurals and word order can follow the language.