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.

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 web and rn-primitives for native platforms.
  • 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.

Project Scope

This project includes only components built without third-party libraries or those that use @rn-primitives (universal radix-ui/primitives). However, we have a list of libraries and repositories to help you find or create these additional components.

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/ui for components styled with NativeWind.
    • ~/lib for utilities, hooks, and constants.
  • Directorycomponents/
    • Directoryui/
  • Directorylib/