Creating Reusable UI Components for Expo Router

This guide covers building production-quality, portable UI components inspired by shadcn/ui, Base UI, Radix, and Konsta UI. Components follow iOS San Francisco design guidelines with liquid glass aesthetics and prioritize native primitives with graceful fallbacks.

Philosophy

Core Principles

1. Portable & Copy-Paste Ready - Components should be self-contained and easy to copy between projects
2. Native-First - Always check for Expo Router primitives before building custom solutions
3. iOS Design Language - Use San Francisco style guide as the baseline for all platforms
4. Compound Components - Break complex components into composable sub-components
5. CSS Variables for Customization - Use design tokens for theming, not hardcoded values
6. Accessibility Built-In - Keyboard handling, safe areas, and screen reader support by default

Inspiration Sources