Unstyled, responsive UI primitives for React Native + Web.

<View sx={{ bg: '$primary', height: [100, 200] }} />

Documentation & Installation

• Documentation
• Installation

Highlights

https://user-images.githubusercontent.com/13172299/136265481-4c93d5bb-15e7-4e5f-9464-64748ebf1214.mp4

• Custom fonts, edited globally
• Full TypeScript support
• Responsive styles
• Universal (Android, iOS, Web, & more)
• Works with Expo
• Works with Vanilla React Native
• Works with Next.js
• Full theme support
• Custom theme variants
• Insanely simple API (themed, responsive designs in one line!)
• Works with Animated/Reanimated/Moti
• Dark mode / custom color modes
• Memoized styles, even when written inline
• Atomic CSS classes, with StyleSheet.create under the hood
• Use with @expo/vector-icons (example)
• Linear Gradient
• Performant: sx prop is memoized under the hood (even if you write it in render)

Next.js Conf

<img alt="Fernando Rojo at Next.js Conf" src="https://user-images.githubusercontent.com/13172299/138509139-412b2d32-841b-4a7e-950e-f8721c1da17f.png" />

I spoke at at Next.js Conf 2021 on October 26 about React Native + Next.js. Watch the video to see how we do it.

License

MIT