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.

Purpose

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

Features

• 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

Note

Most components are built using primitives. This means that you will also need to copy/paste the associated primitive in your project.

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/

  • …