upstream/upstream-shadcn-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
All checks were successful
Release / Create Version PR or Publish Stable Release (push) Has been skipped
Details
Release / Publish Prerelease to NPM (push) Has been skipped
Details
Monitor Registries / Monitor registry health (push) Has been skipped
Details

Browse Source
This commit is contained in:
upstream-mirror
2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
apps/v4/content/docs/rtl/index.mdx Normal file
View File

@@ -0,0 +1,163 @@
---
title: "RTL"
description: "Right-to-left support for shadcn/ui components."
---
shadcn/ui components have first-class support for right-to-left (RTL) layouts. Text alignment, positioning, and directional styles automatically adapt for languages like Arabic, Hebrew, and Persian.
<ComponentPreview
styleName="base-nova"
name="card-rtl"
direction="rtl"
previewClassName="h-auto"
hideCode
caption="A card component in RTL mode."
className="mb-8"
/>
When you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so your components work seamlessly in both LTR and RTL contexts.
## Get Started
Select your framework to get started with RTL support.
<div className="mt-6 grid gap-4 sm:grid-cols-2 sm:gap-6">
<LinkedCard href="/docs/rtl/next">
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="h-10 w-10"
fill="currentColor"
>
<title>Next.js</title>
<path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
</svg>
<p className="mt-2 font-medium">Next.js</p>
</LinkedCard>
<LinkedCard href="/docs/rtl/vite">
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="h-10 w-10"
fill="currentColor"
>
<title>Vite</title>
<path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
</svg>
<p className="mt-2 font-medium">Vite</p>
</LinkedCard>
<LinkedCard href="/docs/rtl/start">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
className="h-10 w-10"
fill="currentColor"
>
<path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
</svg>
<p className="mt-2 font-medium">TanStack Start</p>
</LinkedCard>
</div>
## How it works
When you add components with `rtl: true` set in your `components.json`, the shadcn CLI automatically transforms classes and props to be RTL compatible:
- Physical positioning classes like `left-*` and `right-*` are converted to logical equivalents like `start-*` and `end-*`.
- Directional props are updated to use logical values.
- Text alignment and spacing classes are adjusted accordingly.
- Supported icons are automatically flipped using `rtl:rotate-180`.
## Try it out
Click the link below to open a Next.js project with RTL support in v0.
[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https://github.com/shadcn-ui/next-template-rtl)
## Supported Styles
Automatic RTL transformation via the CLI is only available for projects created using `shadcn create` with the new styles (`base-nova`, `radix-nova`, etc.).
For other styles, see the [Migration Guide](#migrating-existing-components).
## Font Recommendations
For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.
See your framework's RTL guide under [Get Started](#get-started) for details on installing and configuring RTL fonts.
## Animations
The CLI also handles animation classes, automatically transforming physical directional animations to their logical equivalents. For example, `slide-in-from-right` becomes `slide-in-from-end`.
This ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document's text direction.
**A note on tw-animate-css:**
There is a [known issue](https://github.com/Wombosvideo/tw-animate-css/issues/67) with the `tw-animate-css` library where the logical slide utilities are not working as expected. For now, make sure you pass in the `dir` prop to portal elements.
```tsx showLineNumbers /dir="rtl"/
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent dir="rtl">
<div>Content</div>
</PopoverContent>
</Popover>
```
```tsx showLineNumbers /dir="rtl"/
<Tooltip>
<TooltipTrigger>Open</TooltipTrigger>
<TooltipContent dir="rtl">
<div>Content</div>
</TooltipContent>
</Tooltip>
```
## Migrating existing components
If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:
<Steps>
<Step>Run the migrate command</Step>
```bash
npx shadcn@latest migrate rtl [path]
```
`[path]` accepts a path or glob pattern to migrate. If you don't provide a path, it will migrate all the files in the `ui` directory.
### Manual Migration (Optional)
The following components are not automatically migrated by the CLI. Follow the RTL support section for each component to manually migrate them.
- [Calendar](/docs/components/base/calendar#rtl-support)
- [Pagination](/docs/components/base/pagination#rtl-support)
- [Sidebar](/docs/components/base/sidebar#rtl-support)
### Migrate Icons
Some icons like `ArrowRightIcon` or `ChevronLeftIcon` might need the `rtl:rotate-180` class to be flipped correctly. Add the `rtl:rotate-180` class to the icon component to flip it correctly.
```tsx showLineNumbers /rtl:rotate-180/
<ArrowRightIcon className="rtl:rotate-180" />
```
### Add direction component
Add the direction component to your project.
```bash
npx shadcn@latest add direction
```
### Add DirectionProvider
Follow your framework's documentation for details on how to add the `DirectionProvider` component to your project.
See the [Get Started](#get-started) section for details on how to add the `DirectionProvider` component to your project.
</Steps>

4
apps/v4/content/docs/rtl/meta.json Normal file
View File

@@ -0,0 +1,4 @@
{
"title": "RTL",
"pages": ["index", "next", "vite", "start"]
}

97
apps/v4/content/docs/rtl/next.mdx Normal file
View File

@@ -0,0 +1,97 @@
---
title: Next.js
description: Create a new Next.js project with RTL support.
---
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
**Starting a new project?** Use [shadcn/create](/create?template=next&base=base&rtl=true) for a fully configured Next.js app with custom themes, Base UI or Radix, and icon libraries.
</Callout>
<Steps>
### Create Project
Create a new project using the `--rtl` flag and the `next` template.
**You can skip this step if you have already created a project using [shadcn/create](/create?template=next&base=base&rtl=true).**
```bash
npx shadcn@latest create --template next --rtl
```
This will create a `components.json` file with the `rtl: true` flag.
```json title="components.json" showLineNumbers {4}
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "base-nova",
"rtl": true
}
```
### Add DirectionProvider
Wrap your application with the `DirectionProvider` component with the `direction="rtl"` prop.
Then add the `dir="rtl"` and `lang="ar"` attributes to the `html` tag. Update `lang="ar"` to your target language.
```tsx title="app/layout.tsx" showLineNumbers {1,9-13}
import { DirectionProvider } from "@/components/ui/direction"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ar" dir="rtl">
<body>
<DirectionProvider direction="rtl">{children}</DirectionProvider>
</body>
</html>
)
}
```
### Add Font
For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.
```tsx title="app/layout.tsx" showLineNumbers {1,5-8,16}
import { Noto_Sans_Arabic } from "next/font/google"
import { DirectionProvider } from "@/components/ui/direction"
const fontSans = Noto_Sans_Arabic({
subsets: ["arabic"],
variable: "--font-sans",
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ar" dir="rtl" className={fontSans.variable}>
<body>
<DirectionProvider direction="rtl">{children}</DirectionProvider>
</body>
</html>
)
}
```
For other languages, eg. Hebrew, you can use the `Noto_Sans_Hebrew` font.
### Add Components
You are now ready to add components to your project. The CLI will take care of handling RTL support for you.
```bash
npx shadcn@latest add item
```
</Steps>

95
apps/v4/content/docs/rtl/start.mdx Normal file
View File

@@ -0,0 +1,95 @@
---
title: TanStack Start
description: Create a new TanStack Start project with RTL support.
---
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
**Starting a new project?** Use [shadcn/create](/create?template=start&base=base&rtl=true) for a fully configured TanStack Start app with custom themes, Base UI or Radix, and icon libraries.
</Callout>
<Steps>
### Create Project
Create a new project using the `--rtl` flag and the `start` template.
**You can skip this step if you have already created a project using [shadcn/create](/create?template=start&base=base&rtl=true).**
```bash
npx shadcn@latest create --template start --rtl
```
This will create a `components.json` file with the `rtl: true` flag.
```json title="components.json" showLineNumbers {4}
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "base-nova",
"rtl": true
}
```
### Add DirectionProvider
Add the `dir="rtl"` and `lang="ar"` attributes to the `html` tag. Update `lang="ar"` to your target language.
Then wrap your app with the `DirectionProvider` component with the `direction="rtl"` prop in your `__root.tsx`:
```tsx title="src/routes/__root.tsx" showLineNumbers {1,9,14-16}
import { DirectionProvider } from "@/components/ui/direction"
export const Route = createRootRoute({
component: RootComponent,
})
function RootComponent() {
return (
<html lang="ar" dir="rtl">
<head>
<Meta />
</head>
<body>
<DirectionProvider direction="rtl">{children}</DirectionProvider>
<Scripts />
</body>
</html>
)
}
```
### Add Font
For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.
Install the font using [Fontsource](https://fontsource.org/fonts/noto-sans-arabic):
```bash
npm install @fontsource-variable/noto-sans-arabic
```
Import the font in your `styles.css`:
```css title="src/styles.css" showLineNumbers {4,7}
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/noto-sans-arabic";
@theme inline {
--font-sans: "Noto Sans Arabic Variable", sans-serif;
}
```
For other languages, eg. Hebrew, you can use `@fontsource-variable/noto-sans-hebrew`.
### Add Components
You are now ready to add components to your project. The CLI will take care of handling RTL support for you.
```bash
npx shadcn@latest add item
```
</Steps>

107
apps/v4/content/docs/rtl/vite.mdx Normal file
View File

@@ -0,0 +1,107 @@
---
title: Vite
description: Create a new Vite project with RTL support.
---
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
**Starting a new project?** Use [shadcn/create](/create?template=vite&base=base&rtl=true) for a fully configured Vite app with custom themes, Base UI or Radix, and icon libraries.
</Callout>
<Steps>
### Create Project
Create a new project using the `--rtl` flag and the `vite` template.
**You can skip this step if you have already created a project using [shadcn/create](/create?template=vite&base=base&rtl=true).**
```bash
npx shadcn@latest create --template vite --rtl
```
This will create a `components.json` file with the `rtl: true` flag.
```json title="components.json" showLineNumbers {4}
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "base-nova",
"rtl": true
}
```
### Add DirectionProvider
Add the `dir="rtl"` and `lang="ar"` attributes to the `html` tag in your `index.html`. Update `lang="ar"` to your target language.
```html title="index.html" showLineNumbers {2}
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```
Then wrap your app with the `DirectionProvider` component with the `direction="rtl"` prop in your `main.tsx`:
```tsx title="src/main.tsx" showLineNumbers {4,12-13}
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { DirectionProvider } from "@/components/ui/direction"
import App from "./App"
import "./index.css"
createRoot(document.getElementById("root")!).render(
<StrictMode>
<DirectionProvider direction="rtl">
<App />
</DirectionProvider>
</StrictMode>
)
```
### Add Font
For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.
Install the font using [Fontsource](https://fontsource.org/fonts/noto-sans-arabic):
```bash
npm install @fontsource-variable/noto-sans-arabic
```
Import the font in your `index.css`:
```css title="src/index.css" showLineNumbers {4,7}
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/noto-sans-arabic";
@theme inline {
--font-sans: "Noto Sans Arabic Variable", sans-serif;
}
```
For other languages, eg. Hebrew, you can use `@fontsource-variable/noto-sans-hebrew`.
### Add Components
You are now ready to add components to your project. The CLI will take care of handling RTL support for you.
```bash
npx shadcn@latest add item
```
</Steps>