Introduction

React Native USMDS is a comprehensive collection of reusable UI components for React Native applications that follow the U.S. Mobile Design System guidelines. These components enable teams to rapidly build consistent, accessible, and compliant mobile applications for government services with reduced development effort.

What is USMDS?

The U.S. Mobile Design System provides a foundation of interface elements and patterns to help teams create consistent, accessible mobile applications for government services. It extends the U.S. Web Design System (USWDS) principles to mobile applications, ensuring a cohesive experience across web and mobile government platforms.

Key Features

• Accessible: All components meet Section 508 and WCAG 2.1 standards and are thoroughly tested with screen readers
• Cross-Platform: Works seamlessly on both iOS and Android with native look and feel
• Customizable: Built with NativeWind for easy styling customization while maintaining compliance
• Consistent: Follows U.S. government design standards with built-in validation
• Time-Saving: Pre-built compliant components reduce development and approval cycles

Component Philosophy

React Native USMDS components are:

1. Focused on Mobile: Optimized for touch interfaces, mobile contexts, and varying screen sizes
2. Accessibility-First: Built with accessibility as a core requirement, not an afterthought
3. Performant: Lightweight and optimized for mobile performance even on older devices
4. Customizable: Adaptable to various agency branding needs while maintaining compliance with standards

Browser Support

React Native USMDS is designed for React Native applications running on:

• iOS 12+
• Android 5.0+ (API level 21+)
• Web browsers (via React Native Web)

We regularly test on these platforms and provide timely updates to support new OS versions.

Getting Started

To get started with React Native USMDS, follow our installation guide. You'll be up and running with compliant components in minutes, with no complex configuration needed.

Need Help?

Join our GitHub discussions for community support or report issues you encounter.