React Native USMDS

A React Native implementation of the U.S. Web Design System (USMDS), bringing federal government design patterns and components to mobile applications.

Overview

This monorepo contains the following packages:

• apps/docs - Documentation website and examples
• packages/ui - Core UI components library
• packages/cli - CLI tool for easy project setup and component management

Documentation

Prerequisites

• Node.js 22 or higher
• npm, yarn, or pnpm
• React Native project (Expo or bare React Native)

Quick Start

Install the USMDS CLI:

npx @blen/usmds init

Add components to your project:

npx @blen/usmds add

Or add specific components:

npx @blen/usmds add button alert card

Features

🎨 Fully customizable theming based on USMDS guidelines 📱 Native mobile-first components 🔧 Easy setup with CLI tools 🎯 TypeScript support 🎨 NativeWind (Tailwind CSS) integration 📚 Comprehensive documentation

Documentation

Visit our documentation for:

Getting Started Guide Component API Reference Customization Options Best Practices Troubleshooting

Security

Security is a top priority for this project. We use automated code scanning and security analysis to protect against vulnerabilities.

• Code Scanning: Automated CodeQL analysis runs on every PR and push
• Dependency Security: Dependabot monitors and updates vulnerable dependencies
• Security Policy: See SECURITY.md for vulnerability reporting

For details on our security setup and organization-level recommendations, see CODE_SCANNING.md.

Contributing

We welcome contributions! Please see our contributing guidelines for more details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

U.S. Web Design System (USMDS) React Native NativeWind React Native Reusables Tailwind CSS