Skip to content

React Native Reusables

Universal shadcn/ui for React Native

Crafted with NativeWind v4 and accessibility in mind, react-native-reusables is open source, offering a foundation for developing your own high-quality component library.


Build your own component libraries with react-native-reusables. Copy, paste, and tailor the code to suit your specific requirements.


  • Universal: Components, hooks, and utilities for Android, iOS, and the web applications.
  • Accessibility: Built with accessibility in mind. Using radix-ui/primitives for the web and re-usable react-native primitives.
  • Incremental adoption: Use as much or as little as you need at your own pace.
  • Code sharing: Share code between web and native applications.
  • Customization: The code lives in your project, not in your node_modules folder. You can customize it to your heart’s content.
  • Dark mode: Re-usable css variables for light and dark modes.

How to use

  1. Use a template or manually setup configuration
  2. Browse and copy/paste into your project
  3. Customize the code to suit your specific requirements

The react-native-reusables way

This project aims to provide as little opinionated code as possible. However, some opinionated code is necessary to provide a consistent and easy-to-use experience.

  • The CSS variable names are based on shadcn/ui’s naming convention.

  • Folder structure:

    • ~/components/primitives for unstyled accessible components which uses radix-ui/primitives for the web.
    • ~/components/ui for components styled with NativeWind. Most of these components are built using the primitives components.
    • ~/lib for utilities, hooks, and constants.
  • Directorycomponents/
    • Directoryprimitives/
    • Directoryui/
  • Directorylib/