Loading
NebulaKit is direction aware. Components lay out by start and end instead of left and right, so the same app reads left to right and right to left with no extra styles.
Set it once through the dir prop of NebkitProvider. It goes on the provider's root and on the containers of dialogs, popovers and other portals, which render outside it.
Left unset, NebkitProvider writes no dir and the page direction applies, such as a dir set on the html element.
import { NebkitProvider } from '@nebula-kit/core' export const Root = () => ( <NebkitProvider dir="rtl"> <App /> </NebkitProvider>)Spacing, borders, corner radii and offsets, through the start and end Box props such as ps, pe, ms, me and insetInlineStart.
Start and end values, such as the icon placement of a Button, the placement of a Tooltip or Popover and the sides of SplitView.
Arrow keys, which move the way the screen reads, for example in Tabs, Calendar and BinarySwitch.
Directional icons, such as arrows and chevrons, which mirror.
Box keeps the physical props, such as pl, pr, ml, mr, left and right, for the rare case that must stay on one side in both directions.
Text keeps its own direction. Latin text in a right to left layout still reads left to right, only its alignment and punctuation follow the layout.