Get Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Card
- Checkbox
- Collapsible
- Combobox
- Context Menu
- Date Picker (Lite)
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP (Lite)
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
init --rtl installs right-to-left versions of the components, as shadcn init --rtl does upstream: physical classes like ml-2 become logical ones like ms-2, directional icons flip, and popups open on the logical side.
pnpm dlx shadcnui-hono-jsx@latest init --preset b0 --rtlnpx shadcnui-hono-jsx@latest init --preset b0 --rtlyarn dlx shadcnui-hono-jsx@latest init --preset b0 --rtlbunx shadcnui-hono-jsx@latest init --preset b0 --rtlThen set the direction on your document:
<html lang="ar" dir="rtl">The components follow the CSS direction and need no provider. The client scripts read the direction for arrow keys, so keyboard navigation follows the layout too.
To switch an existing project, run apply with --rtl or --no-rtl:
pnpm dlx shadcnui-hono-jsx@latest apply --rtlnpx shadcnui-hono-jsx@latest apply --rtlyarn dlx shadcnui-hono-jsx@latest apply --rtlbunx shadcnui-hono-jsx@latest apply --rtlThe RTL examples on the component pages render with these components.