[{"data":1,"prerenderedAt":944},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":456,"/docs/rtl":469,"surround-/docs/rtl":941},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,294,320,338,344,357,383,396],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":293},"Components","/docs/components","docs/02.components",[14,20,24,28,32,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":36,"type":19,"children":-1},"Attachment","/docs/components/attachment","docs/components/attachment",true,{"title":38,"path":39,"stem":40,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":42,"path":43,"stem":44,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":46,"path":47,"stem":48,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":50,"path":51,"stem":52,"new":36,"type":19,"children":-1},"Bubble","/docs/components/bubble","docs/components/bubble",{"title":54,"path":55,"stem":56,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":58,"path":59,"stem":60,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":62,"path":63,"stem":64,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":66,"path":67,"stem":68,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":70,"path":71,"stem":72,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":74,"path":75,"stem":76,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":78,"path":79,"stem":80,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":82,"path":83,"stem":84,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":86,"path":87,"stem":88,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":90,"path":91,"stem":92,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":94,"path":95,"stem":96,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":98,"path":99,"stem":100,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":102,"path":103,"stem":104,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":106,"path":107,"stem":108,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":110,"path":111,"stem":112,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":114,"path":115,"stem":116,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":118,"path":119,"stem":120,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":122,"path":123,"stem":124,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":126,"path":127,"stem":128,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":130,"path":131,"stem":132,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":134,"path":135,"stem":136,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":138,"path":139,"stem":140,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":142,"path":143,"stem":144,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":146,"path":147,"stem":148,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":150,"path":151,"stem":152,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":158,"path":159,"stem":160,"new":36,"type":19,"children":-1},"Marker","/docs/components/marker","docs/components/marker",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":166,"path":167,"stem":168,"new":36,"type":19,"children":-1},"Message","/docs/components/message","docs/components/message",{"title":170,"path":171,"stem":172,"new":36,"type":19,"children":-1},"Message Scroller","/docs/components/message-scroller","docs/components/message-scroller",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":295,"path":296,"stem":297,"children":298,"new":18,"type":293},"Installation","/docs/installation","docs/02.installation",[299,304,308,312,316],{"title":300,"path":301,"stem":302,"new":18,"type":303,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":305,"path":306,"stem":307,"new":18,"type":303,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":309,"path":310,"stem":311,"new":18,"type":303,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":313,"path":314,"stem":315,"new":18,"type":303,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":317,"path":318,"stem":319,"new":18,"type":303,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":321,"path":322,"stem":323,"children":324,"new":18,"type":293},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[325,328,331,335],{"title":300,"path":326,"stem":327,"new":18,"type":303,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":305,"path":329,"stem":330,"new":18,"type":303,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":332,"path":333,"stem":334,"new":18,"type":303,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":309,"path":336,"stem":337,"new":18,"type":303,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":339,"path":340,"stem":341,"children":342,"new":18,"type":293},"Directory","/docs/directory","docs/directory/index",[343],{"title":339,"path":340,"stem":341,"new":18,"type":303,"children":-1},{"title":345,"path":346,"stem":347,"children":348,"new":18,"type":293},"Forms","/docs/forms","docs/forms",[349,353],{"title":350,"path":351,"stem":352,"new":18,"type":303,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":354,"path":355,"stem":356,"new":18,"type":303,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":358,"path":359,"stem":360,"children":361,"new":18,"type":293},"Registry","/docs/registry","docs/registry/index",[362,363,367,371,375,379],{"title":358,"path":359,"stem":360,"new":18,"type":303,"children":-1},{"title":364,"path":365,"stem":366,"new":18,"type":303,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":368,"path":369,"stem":370,"new":18,"type":303,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":372,"path":373,"stem":374,"new":18,"type":303,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":376,"path":377,"stem":378,"new":18,"type":303,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":380,"path":381,"stem":382,"new":18,"type":303,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"title":384,"path":385,"stem":386,"children":387,"page":18,"type":293},"Utilities","/docs/utilities","docs/utilities",[388,392],{"title":389,"path":390,"stem":391,"new":36,"type":303,"children":-1},"scroll-fade","/docs/utilities/scroll-fade","docs/utilities/scroll-fade",{"title":393,"path":394,"stem":395,"new":36,"type":303,"children":-1},"shimmer","/docs/utilities/shimmer","docs/utilities/shimmer",{"path":6,"stem":7,"title":397,"type":293,"children":398},"Get Started",[399,403,410,414,418,424,428,432,436,440,444,448,452],{"title":400,"path":401,"stem":402,"new":18,"type":303,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":295,"path":296,"stem":297,"children":404,"new":18,"type":293},[405,406,407,408,409],{"title":300,"path":301,"stem":302,"new":18,"type":303,"children":-1},{"title":305,"path":306,"stem":307,"new":18,"type":303,"children":-1},{"title":309,"path":310,"stem":311,"new":18,"type":303,"children":-1},{"title":313,"path":314,"stem":315,"new":18,"type":303,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":303,"children":-1},{"title":411,"path":412,"stem":413,"new":18,"type":303,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":415,"path":416,"stem":417,"new":18,"type":303,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":321,"path":322,"stem":323,"children":419,"new":18,"type":293},[420,421,422,423],{"title":300,"path":326,"stem":327,"new":18,"type":303,"children":-1},{"title":305,"path":329,"stem":330,"new":18,"type":303,"children":-1},{"title":332,"path":333,"stem":334,"new":18,"type":303,"children":-1},{"title":309,"path":336,"stem":337,"new":18,"type":303,"children":-1},{"title":425,"path":426,"stem":427,"new":18,"type":303,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":429,"path":430,"stem":431,"new":18,"type":303,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":433,"path":434,"stem":435,"new":18,"type":303,"children":-1},"RTL","/docs/rtl","docs/08.rtl",{"title":437,"path":438,"stem":439,"new":18,"type":303,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":441,"path":442,"stem":443,"new":18,"type":303,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":445,"path":446,"stem":447,"new":18,"type":303,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":449,"path":450,"stem":451,"new":18,"type":303,"children":-1},"Skills","/docs/skills","docs/skills",{"title":384,"path":385,"stem":386,"children":453,"page":18,"type":293},[454,455],{"title":389,"path":390,"stem":391,"new":36,"type":303,"children":-1},{"title":393,"path":394,"stem":395,"new":36,"type":303,"children":-1},{"repo":457},{"id":458,"name":459,"repo":460,"description":461,"createdAt":462,"updatedAt":463,"pushedAt":464,"stars":465,"watchers":466,"forks":467,"defaultBranch":468},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-07-22T12:12:28Z","2026-07-22T12:11:46Z",10313,37,662,"dev",{"id":470,"title":433,"body":471,"description":934,"extension":935,"links":936,"meta":937,"navigation":36,"new":18,"path":434,"rawbody":938,"seo":939,"stem":435,"__hash__":940},"content/docs/08.rtl.md",{"type":472,"value":473,"toc":916},"minimark",[474,478,481,485,698,702,711,740,744,749,756,760,770,773,779,795,802,808,811,814],[475,476,477],"p",{},"shadcn-vue 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.",[475,479,480],{},"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.",[482,483,397],"h2",{"id":484},"get-started",[486,487,488,493,501,511,521,532,547,551,569,576,586,595,604,608,627,637,641,650,658,664,667,678,685,689,692],"steps",{},[489,490,492],"h3",{"id":491},"enable-rtl","Enable RTL",[475,494,495,496,500],{},"Create a new project using the ",[497,498,499],"code",{},"--rtl"," flag:",[502,503,509],"pre",{"className":504,"code":506,"language":507,"meta":508},[505],"language-bash","npx shadcn-vue@latest create --rtl\n","bash","",[497,510,506],{"__ignoreMap":508},[475,512,513,514,516,517,520],{},"This will create a ",[497,515,411],{}," file with the ",[497,518,519],{},"rtl: true"," flag.",[502,522,530],{"className":523,"code":525,"highlights":526,"language":528,"meta":529},[524],"language-json","{\n  \"$schema\": \"https://shadcn-vue.com/schema.json\",\n  \"style\": \"nova\",\n  \"rtl\": true\n}\n",[527],4,"json","title=\"components.json\" showLineNumbers",[497,531,525],{"__ignoreMap":508},[475,533,534,535,537,538,540,541,546],{},"For an existing project, set ",[497,536,519],{}," in your ",[497,539,411],{}," and see ",[542,543,545],"a",{"href":544},"#migrating-existing-components","Migrating existing components"," below.",[489,548,550],{"id":549},"set-the-direction","Set the direction",[475,552,553,554,557,558,561,562,565,566,568],{},"Add the ",[497,555,556],{},"dir=\"rtl\""," and ",[497,559,560],{},"lang=\"ar\""," attributes to the ",[497,563,564],{},"html"," tag. Update ",[497,567,560],{}," to your target language.",[475,570,571,572,575],{},"For Vite, set them in your ",[497,573,574],{},"index.html",":",[502,577,584],{"className":578,"code":580,"highlights":581,"language":564,"meta":583},[579],"language-html","\u003C!doctype html>\n\u003Chtml lang=\"ar\" dir=\"rtl\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" />\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    \u003Ctitle>Vite App\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Cdiv id=\"app\">\u003C/div>\n    \u003Cscript type=\"module\" src=\"/src/main.ts\">\u003C/script>\n  \u003C/body>\n\u003C/html>\n",[582],2,"title=\"index.html\" showLineNumbers",[497,585,580],{"__ignoreMap":508},[475,587,588,589,537,592,575],{},"For Nuxt, set them via ",[497,590,591],{},"useHead",[497,593,594],{},"app.vue",[502,596,602],{"className":597,"code":599,"language":600,"meta":601},[598],"language-vue","\u003Cscript setup lang=\"ts\">\nuseHead({\n  htmlAttrs: {\n    lang: 'ar',\n    dir: 'rtl',\n  },\n})\n\u003C/script>\n","vue","title=\"app.vue\" showLineNumbers",[497,603,599],{"__ignoreMap":508},[489,605,607],{"id":606},"add-configprovider","Add ConfigProvider",[475,609,610,611,619,620,623,624,626],{},"Wrap your app with the ",[542,612,616],{"href":613,"rel":614},"https://reka-ui.com/docs/utilities/config-provider",[615],"nofollow",[497,617,618],{},"ConfigProvider"," component from ",[497,621,622],{},"reka-ui"," with the ",[497,625,556],{}," prop, so all components read the correct direction:",[502,628,635],{"className":629,"code":630,"highlights":631,"language":600,"meta":634},[598],"\u003Cscript setup lang=\"ts\">\nimport { ConfigProvider } from 'reka-ui'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CConfigProvider dir=\"rtl\">\n    \u003CRouterView />\n  \u003C/ConfigProvider>\n\u003C/template>\n",[582,632,633],6,10,"title=\"App.vue\" showLineNumbers",[497,636,630],{"__ignoreMap":508},[489,638,640],{"id":639},"add-font","Add Font",[475,642,643,644,649],{},"For the best RTL experience, we recommend using fonts that have proper support for your target language. ",[542,645,648],{"href":646,"rel":647},"https://fonts.google.com/noto",[615],"Noto"," is a great font family for this and it pairs well with Inter and Geist.",[475,651,652,653,575],{},"Install the font using ",[542,654,657],{"href":655,"rel":656},"https://fontsource.org/fonts/noto-sans-arabic",[615],"Fontsource",[502,659,662],{"className":660,"code":661,"language":507,"meta":508},[505],"npm install @fontsource-variable/noto-sans-arabic\n",[497,663,661],{"__ignoreMap":508},[475,665,666],{},"Import the font in your css file:",[502,668,676],{"className":669,"code":671,"highlights":672,"language":674,"meta":675},[670],"language-css","@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@import \"@fontsource-variable/noto-sans-arabic\";\n\n@theme inline {\n  --font-sans: \"Noto Sans Arabic Variable\", sans-serif;\n}\n",[673,632],3,"css","title=\"src/assets/index.css\" showLineNumbers",[497,677,671],{"__ignoreMap":508},[475,679,680,681,684],{},"For other languages, eg. Hebrew, you can use ",[497,682,683],{},"@fontsource-variable/noto-sans-hebrew",".",[489,686,688],{"id":687},"add-components","Add Components",[475,690,691],{},"You are now ready to add components to your project. The CLI will take care of handling RTL support for you.",[502,693,696],{"className":694,"code":695,"language":507,"meta":508},[505],"npx shadcn-vue@latest add card\n",[497,697,695],{"__ignoreMap":508},[482,699,701],{"id":700},"how-it-works","How it works",[475,703,704,705,707,708,710],{},"When you add components with ",[497,706,519],{}," set in your ",[497,709,411],{},", the CLI automatically transforms classes to be RTL compatible:",[712,713,714,731,734],"ul",{},[715,716,717,718,557,721,724,725,557,728,684],"li",{},"Physical positioning classes like ",[497,719,720],{},"left-*",[497,722,723],{},"right-*"," are converted to logical equivalents like ",[497,726,727],{},"start-*",[497,729,730],{},"end-*",[715,732,733],{},"Text alignment and spacing classes are adjusted accordingly.",[715,735,736,737,684],{},"Supported icons are automatically flipped using ",[497,738,739],{},"rtl:rotate-180",[482,741,743],{"id":742},"font-recommendations","Font Recommendations",[475,745,643,746,649],{},[542,747,648],{"href":646,"rel":748},[615],[475,750,751,752,755],{},"See the ",[542,753,397],{"href":754},"#get-started"," section for details on installing and configuring RTL fonts.",[482,757,759],{"id":758},"animations","Animations",[475,761,762,763,766,767,684],{},"The CLI also handles animation classes, automatically transforming physical directional animations to their logical equivalents. For example, ",[497,764,765],{},"slide-in-from-right"," becomes ",[497,768,769],{},"slide-in-from-end",[475,771,772],{},"This ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document's text direction.",[475,774,775],{},[776,777,778],"strong",{},"A note on tw-animate-css:",[475,780,781,782,623,787,790,791,794],{},"There is a ",[542,783,786],{"href":784,"rel":785},"https://github.com/Wombosvideo/tw-animate-css/issues/67",[615],"known issue",[497,788,789],{},"tw-animate-css"," library where the logical slide utilities are not working as expected. For now, make sure you pass in the ",[497,792,793],{},"dir"," attribute to portal elements.",[502,796,800],{"className":797,"code":798,"language":600,"meta":799},[598],"\u003CPopover>\n  \u003CPopoverTrigger>Open\u003C/PopoverTrigger>\n  \u003CPopoverContent dir=\"rtl\">\n    \u003Cdiv>Content\u003C/div>\n  \u003C/PopoverContent>\n\u003C/Popover>\n","showLineNumbers",[497,801,798],{"__ignoreMap":508},[502,803,806],{"className":804,"code":805,"language":600,"meta":799},[598],"\u003CTooltip>\n  \u003CTooltipTrigger>Open\u003C/TooltipTrigger>\n  \u003CTooltipContent dir=\"rtl\">\n    \u003Cdiv>Content\u003C/div>\n  \u003C/TooltipContent>\n\u003C/Tooltip>\n",[497,807,805],{"__ignoreMap":508},[482,809,545],{"id":810},"migrating-existing-components",[475,812,813],{},"If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:",[486,815,816,820,826,836,842,856,860,863,877,881,898,904,907],{},[489,817,819],{"id":818},"run-the-migrate-command","Run the migrate command",[502,821,824],{"className":822,"code":823,"language":507,"meta":508},[505],"npx shadcn-vue@latest migrate rtl [path]\n",[497,825,823],{"__ignoreMap":508},[475,827,828,831,832,835],{},[497,829,830],{},"[path]"," accepts a path or glob pattern to migrate. If you don't provide a path, it will migrate all the files in the ",[497,833,834],{},"ui"," directory.",[502,837,840],{"className":838,"code":839,"language":507,"meta":508},[505],"# Migrate a specific file\nnpx shadcn-vue@latest migrate rtl src/components/ui/button/Button.vue\n\n# Migrate files matching a glob pattern\nnpx shadcn-vue@latest migrate rtl \"src/components/ui/**\"\n",[497,841,839],{"__ignoreMap":508},[475,843,844,845,847,848,850,851,855],{},"This will also update your ",[497,846,411],{}," to set ",[497,849,519],{},". See the ",[542,852,854],{"href":853},"/docs/cli#migrate-rtl","CLI documentation"," for more details.",[489,857,859],{"id":858},"manual-migration-optional","Manual Migration (Optional)",[475,861,862],{},"The following components are not automatically migrated by the CLI and may need manual adjustments:",[712,864,865,869,873],{},[715,866,867],{},[542,868,62],{"href":63},[715,870,871],{},[542,872,186],{"href":187},[715,874,875],{},[542,876,230],{"href":231},[489,878,880],{"id":879},"migrate-icons","Migrate Icons",[475,882,883,884,887,888,891,892,894,895,897],{},"Some icons like ",[497,885,886],{},"ArrowRight"," or ",[497,889,890],{},"ChevronLeft"," might need the ",[497,893,739],{}," class to be flipped correctly. Add the ",[497,896,739],{}," class to the icon component to flip it correctly.",[502,899,902],{"className":900,"code":901,"language":600,"meta":799},[598],"\u003CArrowRight class=\"rtl:rotate-180\" />\n",[497,903,901],{"__ignoreMap":508},[489,905,607],{"id":906},"add-configprovider-1",[475,908,610,909,619,911,850,913,915],{},[497,910,618],{},[497,912,622],{},[542,914,397],{"href":754}," section for details.",{"title":508,"searchDepth":582,"depth":582,"links":917},[918,925,926,927,928],{"id":484,"depth":582,"text":397,"children":919},[920,921,922,923,924],{"id":491,"depth":673,"text":492},{"id":549,"depth":673,"text":550},{"id":606,"depth":673,"text":607},{"id":639,"depth":673,"text":640},{"id":687,"depth":673,"text":688},{"id":700,"depth":582,"text":701},{"id":742,"depth":582,"text":743},{"id":758,"depth":582,"text":759},{"id":810,"depth":582,"text":545,"children":929},[930,931,932,933],{"id":818,"depth":673,"text":819},{"id":858,"depth":673,"text":859},{"id":879,"depth":673,"text":880},{"id":906,"depth":673,"text":607},"Right-to-left support for shadcn-vue components.","md",null,{},"---\ntitle: RTL\ndescription: Right-to-left support for shadcn-vue components.\n---\n\nshadcn-vue 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.\n\nWhen you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so your components work seamlessly in both LTR and RTL contexts.\n\n## Get Started\n\n\u003CSteps>\n\n### Enable RTL\n\nCreate a new project using the `--rtl` flag:\n\n```bash\nnpx shadcn-vue@latest create --rtl\n```\n\nThis will create a `components.json` file with the `rtl: true` flag.\n\n```json title=\"components.json\" showLineNumbers {4}\n{\n  \"$schema\": \"https://shadcn-vue.com/schema.json\",\n  \"style\": \"nova\",\n  \"rtl\": true\n}\n```\n\nFor an existing project, set `rtl: true` in your `components.json` and see [Migrating existing components](#migrating-existing-components) below.\n\n### Set the direction\n\nAdd the `dir=\"rtl\"` and `lang=\"ar\"` attributes to the `html` tag. Update `lang=\"ar\"` to your target language.\n\nFor Vite, set them in your `index.html`:\n\n```html title=\"index.html\" showLineNumbers {2}\n\u003C!doctype html>\n\u003Chtml lang=\"ar\" dir=\"rtl\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" />\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    \u003Ctitle>Vite App\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Cdiv id=\"app\">\u003C/div>\n    \u003Cscript type=\"module\" src=\"/src/main.ts\">\u003C/script>\n  \u003C/body>\n\u003C/html>\n```\n\nFor Nuxt, set them via `useHead` in your `app.vue`:\n\n```vue title=\"app.vue\" showLineNumbers\n\u003Cscript setup lang=\"ts\">\nuseHead({\n  htmlAttrs: {\n    lang: 'ar',\n    dir: 'rtl',\n  },\n})\n\u003C/script>\n```\n\n### Add ConfigProvider\n\nWrap your app with the [`ConfigProvider`](https://reka-ui.com/docs/utilities/config-provider) component from `reka-ui` with the `dir=\"rtl\"` prop, so all components read the correct direction:\n\n```vue title=\"App.vue\" showLineNumbers {2,6,10}\n\u003Cscript setup lang=\"ts\">\nimport { ConfigProvider } from 'reka-ui'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CConfigProvider dir=\"rtl\">\n    \u003CRouterView />\n  \u003C/ConfigProvider>\n\u003C/template>\n```\n\n### Add Font\n\nFor 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.\n\nInstall the font using [Fontsource](https://fontsource.org/fonts/noto-sans-arabic):\n\n```bash\nnpm install @fontsource-variable/noto-sans-arabic\n```\n\nImport the font in your css file:\n\n```css title=\"src/assets/index.css\" showLineNumbers {3,6}\n@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@import \"@fontsource-variable/noto-sans-arabic\";\n\n@theme inline {\n  --font-sans: \"Noto Sans Arabic Variable\", sans-serif;\n}\n```\n\nFor other languages, eg. Hebrew, you can use `@fontsource-variable/noto-sans-hebrew`.\n\n### Add Components\n\nYou are now ready to add components to your project. The CLI will take care of handling RTL support for you.\n\n```bash\nnpx shadcn-vue@latest add card\n```\n\n\u003C/Steps>\n\n## How it works\n\nWhen you add components with `rtl: true` set in your `components.json`, the CLI automatically transforms classes to be RTL compatible:\n\n- Physical positioning classes like `left-*` and `right-*` are converted to logical equivalents like `start-*` and `end-*`.\n- Text alignment and spacing classes are adjusted accordingly.\n- Supported icons are automatically flipped using `rtl:rotate-180`.\n\n## Font Recommendations\n\nFor 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.\n\nSee the [Get Started](#get-started) section for details on installing and configuring RTL fonts.\n\n## Animations\n\nThe 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`.\n\nThis ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document's text direction.\n\n**A note on tw-animate-css:**\n\nThere 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` attribute to portal elements.\n\n```vue showLineNumbers\n\u003CPopover>\n  \u003CPopoverTrigger>Open\u003C/PopoverTrigger>\n  \u003CPopoverContent dir=\"rtl\">\n    \u003Cdiv>Content\u003C/div>\n  \u003C/PopoverContent>\n\u003C/Popover>\n```\n\n```vue showLineNumbers\n\u003CTooltip>\n  \u003CTooltipTrigger>Open\u003C/TooltipTrigger>\n  \u003CTooltipContent dir=\"rtl\">\n    \u003Cdiv>Content\u003C/div>\n  \u003C/TooltipContent>\n\u003C/Tooltip>\n```\n\n## Migrating existing components\n\nIf you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:\n\n\u003CSteps>\n\n### Run the migrate command\n\n```bash\nnpx shadcn-vue@latest migrate rtl [path]\n```\n\n`[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.\n\n```bash\n# Migrate a specific file\nnpx shadcn-vue@latest migrate rtl src/components/ui/button/Button.vue\n\n# Migrate files matching a glob pattern\nnpx shadcn-vue@latest migrate rtl \"src/components/ui/**\"\n```\n\nThis will also update your `components.json` to set `rtl: true`. See the [CLI documentation](/docs/cli#migrate-rtl) for more details.\n\n### Manual Migration (Optional)\n\nThe following components are not automatically migrated by the CLI and may need manual adjustments:\n\n- [Calendar](/docs/components/calendar)\n- [Pagination](/docs/components/pagination)\n- [Sidebar](/docs/components/sidebar)\n\n### Migrate Icons\n\nSome icons like `ArrowRight` or `ChevronLeft` 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.\n\n```vue showLineNumbers\n\u003CArrowRight class=\"rtl:rotate-180\" />\n```\n\n### Add ConfigProvider\n\nWrap your app with the `ConfigProvider` component from `reka-ui`. See the [Get Started](#get-started) section for details.\n\n\u003C/Steps>\n",{"title":433,"description":934},"nDxwKJ39K2-2-shxRED04201ukOTxB2DkyaXQbFeB-4",[942,943],{"title":429,"path":430,"stem":431,"children":-1},{"title":437,"path":438,"stem":439,"children":-1},1784722561111]