Direction
A provider component that sets the text direction (LTR or RTL) for your application. Essential for supporting right-to-left languages like Arabic, Hebrew, and Persian.
PreviewFeatures
DirectionProvider sets text direction (ltr or rtl) for the app
Essential for right-to-left languages (Arabic, Hebrew, Persian)
useDirection hook returns current direction in components
Works with html dir attribute for proper RTL layout
Radix UI primitive—accessible and consistent with shadcn/ui
Design RTL interfaces in Figma that match production behavior
Shadcn/ui Direction - Figma Component
A provider component that sets the text direction (LTR or RTL) for your application. Essential for supporting right-to-left languages like Arabic, Hebrew, and Persian. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Direction variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 56 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Direction
Drawer
Dropdown Menu
Empty
Field
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toggle Group
Toggle
Tooltip
RTL design in Figma
The shadcn/ui figma Direction component helps you design right-to-left interfaces for Arabic, Hebrew, and Persian. Use the same layout and components in Figma with mirrored alignment and flow. This shadcn figma component keeps RTL and LTR consistent from design to code.
DirectionProvider and useDirection
Design apps that support multiple languages and directions in Figma with the shadcn/ui figma Direction—DirectionProvider sets app-wide direction, useDirection lets components adapt. Prototype language switchers and RTL layouts that match shadcn/ui behavior.
Accessible RTL with shadcn figma
This shadcn figma Direction component follows Radix UI Direction patterns. Design accessible RTL in Figma so focus order, reading order, and alignment translate correctly when developers implement with DirectionProvider and the proper dir attribute.