RadCN
Utilitiesreadycomponentready

Direction

Direction is included in the RadCN public package surface with authored docs metadata, package import guidance, and a live preview.

Importimport { Direction, DirectionProvider } from 'radcn/direction'
Preview

Live package example

Direction renders from the RadCN package in the docs app, with a compact example suitable for visual inspection.

Authored preview

Direction renders from the RadCN package in the docs app, with a compact example suitable for visual inspection.

Preview
RTL preview

DirectionProvider writes real `dir` behavior into the rendered subtree.

import { Direction, DirectionProvider } from 'radcn/direction'

export function DirectionPreview() {
  return (
    <DirectionProvider dir="rtl">
      <p>DirectionProvider writes real dir behavior into the subtree.</p>
    </DirectionProvider>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Direction, DirectionProvider } from 'radcn/direction'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Direction renders semantic host elements from the RadCN package so baseline accessibility is present in server HTML.
  • Interactive behavior is attached through explicit Remix 3 browser enhancement where the component requires runtime state.

Customization

  • Use RadCN CSS variables for color, radius, spacing, and focus treatment.
  • Target public direction data hooks and part classes from the package instead of depending on docs-only wrappers.

Remix 3 Notes

  • RadCN documents this surface as Remix UI package code rather than a copied React component.
  • The docs example imports from the package subpath users are intended to import from once installation is available.