dripsy

🍷 A super-simple responsive design system for React Native Web.

Usage no npm install needed!

<script type="module">
  import dripsy from 'https://cdn.skypack.dev/dripsy';
</script>

README

Unstyled, universal responsive UI primitives for React Native + Web.

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

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)