React Native Reusables

Universal shadcn/ui for React Native featuring a focused collection of components

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.

https://github.com/mrzachnugent/react-native-reusables/assets/63797719/ae7e074f-05a4-4568-b71a-f1e0be13650d

📖 Docs
🌐 Web demo

How to use

Init

Quickly create a new project using the React Native Reusables CLI.

npx @react-native-reusables/cli@latest init

Add

Add components to an existing project using the React Native Reusables CLI.

npx @react-native-reusables/cli@latest add

Upcoming components

• Alert
• Breadcrumb
• Pagination
• Slider
• Toast

Project Scope

This project includes only components built without third-party libraries or those that use @rn-primitives (universal radix-ui/primitives).

Excluded components

Only 15 out of the 51 shadcn/ui components are excluded from this library. However, you can use the following packages or repositories to build your own

Calendar

• React Native Flash Calendar: An incredibly fast and flexible library to build calendars in React Native.

Carousel

• Animated.ScrollView: An article explaining how to create a carousel using the ScrollView component.

Chart

• Victory Native: A charting library for React Native with a focus on performance and customization.

Combobox

TBD

Command

TBD

Data Table

• Tanstack Table: Headless UI for building powerful tables & datagrids

Date Picker

• React Native DateTimePicker: React Native date & time picker component for iOS, Android and Windows

Drawer

• Universal Bottom Sheet by adebayoileri: A bottom sheet component that combines Gorhom Bottom Sheet and Vaul for seamless and responsive experience across both mobile and web.

Form

• React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.

Input OTP

• input-otp-input: 🔐 OTP input for React Native/Expo App: Unstyled, copy-paste examples that are fully tested and compatible with NativeWind.

Resizable

TBD

Scroll Area

• React Native ScrollView: A generic scrolling container that can host multiple components and views.

Sheet (Drawer navigation)

• Drawer navigation: A drawer navigation component that slides in from the side.

Sonner

• Sonner Native by gunnartorfis: An opinionated toast component for React Native. A port of @emilkowalski's sonner.

• Burnt: Cross-platform toasts for React Native, powered by native elements. On Web, it wraps Sonner.

Community Templates

Explore community-created components and templates that extend the core library and fill in missing shadcn/ui elements. Contributions are welcome!

• RNR Base Bare by a0m0rajab: A simple app using Supabase as the backend, featuring sign-in/sign-up and profile functionality.

How to contribute

1. Fork this repo, then clone your fork on your machine.

2. Change directory into the cloned repo: cd react-native-reusables

3. Install the dependencies (IMPORTANT: Must use pnpm): pnpm i

4. From the root directory, start up desired app with the following commands:

• Showcase
  • iOS: pnpm dev:showcase
  • Android: pnpm dev:showcase:android
  • Web: pnpm dev:showcase:web
• Starter-base
  • iOS: pnpm dev:starter-base
  • Android: pnpm dev:starter-base:android
  • Web: pnpm dev:starter-base:web
• Docs: pnpm dev:docs

1. Add and commit your changes

2. Make a pull request

Deprecated-UI

These components are still available for use but are no longer recommended or actively supported by the developers. They can be used as inspiration or as a starting point for your own components.

View deprecated components