Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
Threads text direction through the primitives that do not read it from the DOM.
Reduced motion: off · your browser setting
npx @kinetixui/cli add direction-providerimport { KinetixDirectionProvider } from "@kinetixui/ui";Setting dir on <html> is what mirrors layout — every KinetixUI component is
written with logical CSS properties, so that alone flips padding, borders and
alignment. See RTL.
What it does not flip is Radix's own positioning. Select, Dropdown Menu,
Popover, Tooltip, Context Menu, Menubar, Navigation Menu and Hover Card read
direction from a React context rather than from the ambient dir attribute,
and with no provider in the tree they default to ltr and stamp that onto
their portaled content — which renders outside your dir="rtl" subtree. The
result is a right-to-left page whose menus open on the wrong side.
Wrap the app root alongside the attribute:
<html dir={dir}>
<KinetixDirectionProvider dir={dir}>{children}</KinetixDirectionProvider>
</html>This is the one component in the catalogue that exists because of a gap in a
web dependency, not because of a gap in a platform. Angular, SwiftUI, Jetpack
Compose and Flutter each carry layout direction in the framework itself — the
dir attribute, an environment value, a CompositionLocal, an inherited
widget — so there is no context to thread and nothing to port. The platform
tabs above show each one's own idiom, labelled Native equivalent, and none
of them counts towards platform parity. components.manifest.json records that
decision; pnpm check:platform-source enforces it.
The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| children | React.ReactNode | |
| dirrequired | "ltr" | "rtl" |