Components
Direction
Sets the ambient text direction (ltr/rtl) via the native dir attribute. Purely presentational.
Installation
npx kosmesis add directionpnpm dlx kosmesis add directionyarn dlx kosmesis add directionbunx kosmesis add directionCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";export type TextDirection = "ltr" | "rtl";export interface DirectionProviderProps { dir: TextDirection; children?: Children;}// PraxisJS/Morphos have no context system, so this just sets the native `dir` attribute — the// browser and every Morphos component's CSS already respect it via `:dir(rtl)`/`[dir="rtl"]`.@Component()export class DirectionProvider extends StatelessComponent<DirectionProviderProps> { render() { const { dir, children } = this.props; return <div dir={dir}>{children}</div>; }}Install the following dependencies:
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";export type TextDirection = "ltr" | "rtl";export interface DirectionProviderProps { dir: TextDirection; children?: Children;}// PraxisJS/Morphos have no context system, so this just sets the native `dir` attribute — the// browser and every Morphos component's CSS already respect it via `:dir(rtl)`/`[dir="rtl"]`.@Component()export class DirectionProvider extends StatelessComponent<DirectionProviderProps> { render() { const { dir, children } = this.props; return <div dir={dir}>{children}</div>; }}Examples
Usage
import { DirectionProvider } from "@/components/ui/direction";
<DirectionProvider dir="rtl">
<YourApp />
</DirectionProvider>PraxisJS/Morphos have no context system, so DirectionProvider is a plain element setting
the native dir attribute — the browser (and Morphos's own CSS-selector-driven styling) already
respects it via :dir(rtl)/[dir="rtl"] for free. If a component's behavior (not just layout)
needs to flip per-direction, pass orientation/side props to that component directly.
Props
DirectionProvider
| Prop | Type | Default |
|---|---|---|
dir | "ltr" | "rtl" | — required |