Introduction

This is not a component library. It is how you build your component library.

Moe UI brings the shadcn/ui experience to React Native. It provides a set of beautifully crafted, accessible, and customizable components that work universally across iOS, Android, and Web.

Philosophy

Moe UI is built on three core pillars to ensure a top-tier developer and user experience:

📱 Universal

Write once, run everywhere. Every component is designed to work seamlessly on iOS, Android, and the Web using a single codebase. By leveraging universal primitives, you can ensure consistent behavior and styling across all platforms.

♿ Accessible

Accessibility is a first-class citizen. Built on top of rn-primitives (a port of Radix UI), Moe UI ensures that your app is usable by everyone. It handles focus management, keyboard navigation, and screen reader support out of the box.

🎨 Customizable

Styled with NativeWind (TailwindCSS for React Native), Moe UI gives you complete control over the look and feel of your app. Whether you need to tweak a color, adjust spacing, or implement a completely new theme, you can do it directly with utility classes.

Adapting for React Native

While Moe UI aims to replicate the shadcn/ui experience, distinct differences exist due to the nature of mobile development:

• NativeWind: The styling engine that brings TailwindCSS to React Native.
• RN Primitives: The foundation for accessible, unstyled components.
• Portals: Native modals and menus require PortalHost to render correctly above other content.
• No Cascading Styles: React Native styles do not cascade. Text styles must be applied directly to Text components.
• Reanimated: Used for high-performance, native-driven animations.

Moe UI handles these constraints for you, providing a familiar API that feels like home for React developers.