Direction

Text-direction wrapper (ltr/rtl) carrying a data-slot surface.

Preview

Style

Left-to-right text.

Right-to-left text.

src/demo/views/direction.ts23 lines

import type { Html, HtmlBuilder } from 'foldkit/html'

import { direction } from '../../generated/registry/ui/direction'

import { defineSlice } from '../slice'
import type { Model, Message } from '../assemble'

export const directionView = (model: Model, h: HtmlBuilder<Message>): Html =>
  h.div(
    [h.Class('flex flex-col gap-4')],
    [
      direction<Message>({ dir: 'ltr' }, [h.p([h.Class('text-sm')], ['Left-to-right text.'])], h),
      direction<Message>({ dir: 'rtl' }, [h.p([h.Class('text-sm')], ['Right-to-left text.'])], h),
    ],
  )

export const slice = defineSlice({
  fields: {},
  init: {},
  messages: [],
  handlers: () => ({}),
})

This code is shown verbatim — it’s the exact file used for this preview. Much of the surrounding wiring (slice, fields, messages, handlers) belongs to this site’s demo harness; you only need the view and the state that matters for your own app. Adapt what you need.

View source on GitHub

Installation

Add this component to your project:

pnpm dlx shadcn@latest add @foldcn/direction

Source

The component ships as plain source — no build step, no wrapper. Copy it and make it yours.

registry/default/ui/direction.ts21 lines

/** Divergence from upstream: shadcn `direction.tsx` re-exports
 *  `DirectionProvider`/`useDirection` from `@base-ui/react/direction-provider`.
 *  foldcn instead renders a plain `<div dir="...">` (`direction`) — no provider
 *  context. Existing foldcn API is `direction({ dir, className }, children, h)`;
 *  do not switch to a provider without a major version bump. */
import type { Html, HtmlBuilder } from 'foldkit/html'

type Child = Html | string

import { cn } from '@/lib/utils'

export type Direction = 'ltr' | 'rtl'

type DirectionConfig = Readonly<{ dir: Direction; className?: string }>

export const direction = <M>(
  config: DirectionConfig,
  children: ReadonlyArray<Child>,
  h: HtmlBuilder<M>,
): Html => h.div([h.Dir(config.dir), h.Class(cn('w-full', config.className))], children)