Feature Request: Direction-Aware Components for RTL in HeroUI v3 #6061
alialnaghmoush
started this conversation in
Feature requests
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
🚀 Feature Request: Direction-Aware Components for RTL in HeroUI v3
Hi HeroUI team 👋,
First, thank you for the outstanding work on HeroUI v3.
The new foundation built on Tailwind CSS v4, React 19, and React Aria Components shows a high level of engineering quality, thoughtful design, and a strong long-term vision.
Tailwind v4 already delivers excellent RTL support at the CSS utility level. However, global RTL usage still exposes gaps that cannot be solved with CSS alone, because they require component-level behavior, not style mirroring.
This request focuses only on adding native direction-aware behavior inside HeroUI components.
No new global provider, no auto-detection, and no additional API surface — just components that behave correctly when
dir="rtl"is applied.🧩 Why Component-Level RTL Support Is Important
When developers set:
Tailwind v4 automatically flips styles, spacing, paddings, and logical properties.
But several HeroUI v3 components still assume LTR logic by default, which leads to unintended behaviors in RTL applications.
These aren’t just visual inconsistencies — they affect usability, interaction patterns, and perceived quality.
Component-level direction awareness ensures HeroUI works seamlessly for users of Arabic, Persian, Urdu, Hebrew, and other RTL languages.
🔧 Tailwind CSS v4 RTL Guidance for HeroUI
Since Tailwind CSS v4 already provides full logical property support, the key requirement is ensuring HeroUI components follow logical, direction-agnostic utilities so they automatically adapt to RTL via:
Below is a concise reference of Tailwind v4 RTL‑friendly patterns that HeroUI components should follow internally.
✅ Use Logical Positioning (start/end)
Replace
left→startReplace
right→endExample:
left-0→start-0right-4→end-4✅ Use Logical Padding & Margin (ps/pe/ms/me)
pl-*→ps-*pr-*→pe-*ml-*→ms-*mr-*→me-*Example:
✅ Use Inline Axis Utilities
px-*andmx-*work consistently in both LTR and RTL.✅ Use Flexbox Logical Alignment
justify-start/justify-endinstead of assuming LTR-specific alignment.✅ Use Logical Border & Ring Placement
border-l→border-sborder-r→border-e✅ Use Direction-Aware Transforms & Animations
If animations involve directional movement:
Replace
translate-x-…with logical variants such as:rtl:translate-x-*✅ Use Writing Direction Variables
Use CSS logical values:
When applied inside components, this ensures RTL correctness without extra props.
Summary
By using Tailwind CSS v4’s logical start/end and inline logical spacing utilities, all HeroUI components will automatically adapt to RTL without requiring a provider, configuration, or manual overrides.
🎯 What This Request Does Not Ask For What This Request Does Not Ask For
To keep things simple and aligned with HeroUI’s design principles, this request does not require:
❌ Global RTL provider
❌ Auto-detection logic
❌ New configuration files
❌ Extra props or API additions
❌ Rewriting the architecture
The proposal is straightforward:
This keeps HeroUI lightweight, predictable, and fully aligned with Tailwind CSS v4’s logical properties system.
🌍 Why This Enhancement Matters for HeroUI
Adding direction-aware behavior to core components will:
HeroUI v3 already provides an exceptional foundation — adding direction support makes the library complete for real-world multilingual applications.
🙏 Final Thoughts
Thank you again for creating such a modern and thoughtfully engineered component library.
The community truly appreciates the care and quality reflected in HeroUI v3.
If you choose to explore this enhancement, I would be happy to help:
Looking forward to your thoughts — and excited for what’s next for HeroUI v3! 🙌
Beta Was this translation helpful? Give feedback.
All reactions