'direction' component found in docs but missing from registry

[BAKKALIAYOUB]

The documentation for RTL support (https://ui.shadcn.com/docs/rtl) and the Direction component (https://ui.shadcn.com/docs/components/radix/direction) instructs users to install the direction provider using the CLI command: npx shadcn@latest add direction

However, running this command fails because the item does not exist in the registry.

$ npx shadcn@latest add direction


Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Message:
The item at https://ui.shadcn.com/r/styles/new-york/direction.json was not found. It may not exist at the registry.

Suggestion:
Check if the item name is correct and the registry URL is accessible.

[Elena-tech]

This looks like the direction component hasn't been published to the registry yet — the RTL docs reference it but the JSON doesn't exist at ui.shadcn.com/r/styles/new-york/direction.json.

In the meantime, you can set up RTL support manually using Radix's Direction provider directly:

import { DirectionProvider } from "@radix-ui/react-direction";

export default function App({ children }: { children: React.ReactNode }) {
return (

{children}

);
}
You'll also want to add dir="rtl" to your root element.

This is effectively what the shadcn direction component wraps — it just hasn't been added to the registry yet. You might want to open an issue to track it if one doesn't exist already.

[abhayclasher]

yeah this is a known doc/registry mismatch lol

the direction component is mentioned in the RTL docs but it literally doesn't exist in the registry yet — so the CLI just fails. docs got ahead of the implementation.

quick workaround — do it manually:

npm install @radix-ui/react-direction

then create components/ui/direction.tsx:

"use client"

import { DirectionProvider as RadixDirectionProvider } from "@radix-ui/react-direction"

type Direction = "ltr" | "rtl"

function DirectionProvider({ children, direction }: { children: React.ReactNode; direction: Direction }) {
  return (
    <RadixDirectionProvider dir={direction}>
      {children}
    </RadixDirectionProvider>
  )
}

export { DirectionProvider }

then in ur layout.tsx:

<DirectionProvider direction="rtl">
  {children}
</DirectionProvider>

also add dir="rtl" to ur <html> tag. that's basically all the shadcn component does anyway — just wraps radix's provider. should work fine til it lands in the registry.

[yahyakhalid]

The component isn't missing everywhere, only from the new-york style.

direction exists in the Tailwind v4 registry (new-york-v4, and the newer radix-* / base-* styles), but not in the old new-york one. That's exactly the URL in your error: /r/styles/new-york/direction.json returns 404, while /r/styles/new-york-v4/direction.json returns the component.

So you can install it straight from the v4 registry:

npx shadcn@latest add https://ui.shadcn.com/r/styles/new-york-v4/direction.json

It imports from the unified radix-ui package. If your project still uses the individual @radix-ui/react-* packages, either run npm i radix-ui, or change the import in components/ui/direction.tsx to:

import * as Direction from "@radix-ui/react-direction"

Then wrap the app:

import { DirectionProvider } from "@/components/ui/direction"

<html lang="ar" dir="rtl">
  <body>
    <DirectionProvider dir="rtl">{children}</DirectionProvider>
  </body>
</html>

[RafaelHDSV]

The docs page is describing Radix's Direction primitive, not a shadcn registry component. There is no direction.json in the new-york (or nova) registry, so npx shadcn@latest add direction is expected to 404.

Install the Radix package and wrap the tree yourself:

npm install @radix-ui/react-direction

// app/layout.tsx (or your root provider)
import { DirectionProvider } from '@radix-ui/react-direction'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

Two things that trip people up:

1. Set dir on <html> as well. Many layout utilities (ms-* / me-*, start / end) follow the document direction, not only the Radix context.
2. DirectionProvider is what Radix components (Dialog, Popover, DropdownMenu, ScrollArea, …) read for slide/overflow direction. Putting dir="rtl" on a single widget is not enough if a portal renders into document.body.

You do not need a shadcn wrapper for this. If the docs keep advertising npx shadcn@latest add direction, that command should be removed or the item added to the registry — the install path above is the one that actually works today.

If this unblocked the RTL setup, please mark this as the accepted answer so others hitting the 404 can find it.

[yahyakhalid]

Quick check today, since the thread now has two different answers: the item does exist, just not for every style.

/r/styles/new-york/direction.json     -> 404
/r/styles/new-york-v4/direction.json  -> 200
/r/styles/radix-nova/direction.json   -> 200
/r/styles/base-nova/direction.json    -> 200

So npx shadcn@latest add direction works as documented in projects whose components.json uses a v4 style. It only fails on the Tailwind v3 styles (new-york, default). There you can install it from the v4 URL, or use @radix-ui/react-direction directly; the registry item is a thin wrapper around it.

I opened #12513 to add a note about this to the RTL and Direction docs.