Noor UI
Building the First True Bilingual Design System for the GCC Market
Open Source, Design Systems, RTL, React, TypeScript, Tailwind CSS
Why This Matters
Noor UI emerged from a critical gap in the design system ecosystem: there was no production-ready, truly bilingual design system that treated Arabic as a first-class citizen. Most RTL implementations are afterthoughts—poorly mirrored LTR designs that break cultural context.
I built Noor UI to change that. It's an open-source design system with 64 accessible components, 4 distinct themes, and perfect RTL mirroring. More importantly, it's a teaching tool for developers who want to understand how to build culturally-aware, accessible UIs for the 425 million Arabic speakers worldwide.
Four themes, one token system. Switch between aesthetics while maintaining consistency.
Building Noor UI required solving problems most developers never encounter:
– RTL-first, not RTL-adapted: Every component was designed with bidirectional support from day one
– Token-based theming: Four distinct visual languages powered by the same design tokens
– Accessibility at scale: WCAG AA compliance across all 64 components in both languages
– Performance: Built on Next.js 14 with zero runtime CSS-in-JS overhead
The result? A design system where English and Arabic are true equals—not a primary language and an adaptation.
64 components. 4 themes. 2 languages. 1 token system.
Built to Share, Not to Sell
Noor UI is 100% open source. Every line of code, every design decision, and every lesson learned is public. Why?
Because the next generation of Arabic-speaking developers deserves the same quality of tools that English-speaking developers take for granted. By open-sourcing Noor UI, I'm not just releasing code—I'm creating a learning resource for developers tackling bilingual design challenges.
The GitHub repo includes:
– Complete component library with TypeScript
– Design token architecture documentation
– RTL implementation guides
– Accessibility testing strategies
– Theme customization examples
Teaching Through Building
Beyond the code, Noor UI has become a teaching resource:
– 200+ developers have starred the GitHub repo
– Featured in design system articles about RTL best practices
– Used in workshops and meetups to demonstrate bilingual design
– Referenced in design-code.tips comprehensive RTL guides
The project proves that design systems can be both production-ready and educational—a blueprint for how senior developers can give back through open source
