Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.2K
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Agent Skills
  • RTL
  • Changelog
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
Components
  • Alert
  • Autocomplete
  • Badge
  • Data GridTree rows at any depth and cross-parent row drag and drop
  • Date Selector
  • Event CalendarNew event calendar component with five views
  • File Upload
  • FiltersSizing and interaction refinements
  • Frame
  • GanttNew gantt component with day to year scales
  • Icon Stack
  • Icon TileNew icon tile component with five surface variants
  • KanbanonValueCommit callback and accessibility improvements
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • SortableonValueCommit callback and accessibility improvements
  • StepperRender prop composition and styling refinements
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event CalendarThree new event calendar blocks added
  • Form
  • GanttNew gantt block added
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Inventory
  • Users

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist

Data Grid

  • Base
  • Columns
  • Drag & DropNew drag and drop Data Grid block added
  • EditingNew editable Data Grid block added
  • Expansion
  • Filtering
  • GroupingFour new grouped and tree Data Grid blocks added
  • Virtualization

Marketing

  • Blog
  • Contact
  • CTA
  • FAQ

Resources

  • Components
  • Blocks
  • Docs
  • Support
  • Pricing
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.2K

RTL

PreviousNext

How right-to-left support works in ReUI, what the shadcn CLI converts for you, and what to check in your own app.

Overview

ReUI is a standard shadcn registry. It ships the same style families the shadcn CLI supports (base-nova, radix-nova and the rest), so everything the CLI does for RTL on shadcn's own components, it does for ReUI components, blocks and Motion Icons in exactly the same way. There is no ReUI-specific RTL mode to enable and nothing to configure beyond the standard shadcn setup.

Set RTL up once, following the official guide: . That page is the source of truth for the components.json flag, the DirectionProvider, and the framework-specific wiring for Next.js, Vite and TanStack Start. This page only covers what is specific to ReUI.

What the CLI converts

With RTL enabled in components.json, the shadcn CLI rewrites physical Tailwind utilities into logical ones as the code is written into your project. It applies to anything installed from a registry, ReUI included:

  • Positioning: left-* and right-* become start-* and end-*
  • Spacing: ml-*, mr-*, , become , , ,
Agent SkillsChangelog

On This Page

OverviewWhat the CLI convertsWhat the CLI cannot convertWhere ReUI stands todayChecklist for an RTL appFurther reading
pl-*
pr-*
ms-*
me-*
ps-*
pe-*
  • Text alignment: text-left and text-right become text-start and text-end
  • Borders and radii: border-l, rounded-r and friends become their -s / -e equivalents
  • Directional animations: slide-in-from-right becomes slide-in-from-end

    • This is why you do not need ReUI source to be written in logical properties: the conversion happens at install time, on the copy that lands in your repository.

    Existing projects need one migration pass

    The automatic conversion applies to projects created with shadcn create on the new style families. If you added ReUI to an older project, run pnpm dlx shadcn@latest migrate rtl [path] over the installed files once, then keep RTL enabled so later installs are converted as they arrive.

    What the CLI cannot convert

    Class conversion is mechanical and it is only half of RTL. The other half is behavior, and no CLI can infer it:

    • Drag and drop. Pointer deltas are signed. A grid, Kanban or Gantt that reorders on a positive x delta needs that sign flipped under RTL.
    • Scroll position. Horizontal scroll origin differs in RTL, which affects virtualized grids, timelines and anything that restores a saved scrollLeft.
    • Charts. Axis placement and series direction come from the charting library's own configuration, not from Tailwind classes.
    • Icons that encode direction. Chevrons and arrows need rtl:rotate-180; a check mark or a spinner must not be flipped.
    • Content order. Whether a sidebar belongs on the start or end edge is a product decision, not a styling one.

    Where ReUI stands today

    Being straight about this is more useful than a blanket claim.

    Primitives are written predominantly with logical properties already, so they degrade well before any conversion runs. The exceptions are the ones with real geometry: the Data Grid table, and the Gantt drag layer, both of which compute positions in JavaScript and are the first places to look if something reads wrong.

    Blocks are presentational compositions built on those primitives and shadcn components. They are authored the way shadcn's own examples are, with physical utilities in places, and the CLI's RTL transform is what converts them on install. Because a block is layout rather than logic, class conversion covers most of what a block needs.

    Not yet done, so budget for it. We do not currently ship an RTL preview toggle on block pages, an RTL test suite, or a per-block certification list. The interactive primitives - Data Grid, Gantt, Event Calendar, Kanban, Filters, App Shell - have not been formally verified in RTL, and those are exactly the ones where the behavioral issues above live. If you are building an Arabic-first or Hebrew-first product, treat static blocks as low-risk and plan a review pass over the interactive ones: verify column order, sidebar edge, drag direction, horizontal scroll and chart axes against your own designs.

    Tell us what breaks

    Building RTL-first and hitting something specific? Tell us the block or primitive and what breaks. Concrete reports are what turn this section into a shorter list.

    Checklist for an RTL app

    Enable RTL in shadcn

    Follow the shadcn RTL guide to set the flag in components.json and add the DirectionProvider for your framework. Do this before installing ReUI items so they are converted on the way in.

    Install ReUI items as usual

    Terminal
    pnpm dlx shadcn@latest add @reui/c-data-grid-30

    Nothing changes in the command. The registry is the same; the CLI applies the RTL transform to what it writes.

    Review interactive surfaces

    For each Data Grid, Gantt, Event Calendar, Kanban or Filters instance, check the five behaviors class conversion cannot reach: column order, drag direction, horizontal scroll, chart axes, and any icon that points somewhere.

    Flip only the icons that mean direction

    Add rtl:rotate-180 to chevrons, arrows and carets. Leave symbolic icons alone.

    Further reading

    • shadcn/ui RTL documentation - setup, the DirectionProvider, the full conversion list and known caveats
    • Styling - ReUI's extended token system, which is direction-independent
    shadcn/ui RTL documentation