USMDS Development Guide

Build accessible React Native mobile interfaces using the U.S. Mobile Design System (USMDS) with NativeWind styling.

Quick Reference

• Components: See references/components.md for all components with imports and usage examples
• Setup: See references/setup.md for project initialization, Metro/Babel/Tailwind config
• Theming: See references/theming.md for design tokens, colors, and custom theme configuration

Core Architecture

USMDS has three layers:

1. Components — Pre-built accessible UI from @/components/ui/* (Button, Card, Alert, etc.)
2. NativeWind Styling — Tailwind CSS classes via the className prop
3. Theme Tokens — CSS custom properties (HSL-based) for consistent design language

Components are imported individually. Styling uses NativeWind (Tailwind for React Native). Theming flows through tailwind.config.js CSS variables.