mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-24 13:15:45 +00:00
38de7fddc2
* feat: rtl * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add sidebar * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * chore: changeset * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix
96 lines
2.5 KiB
Plaintext
96 lines
2.5 KiB
Plaintext
---
|
|
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>
|