Skip to content

Bringing shadcn/ui to React Native. Beautifully crafted components with Nativewind, open source, and almost as easy to use.

License

Notifications You must be signed in to change notification settings

mrzachnugent/react-native-reusables

Repository files navigation

React Native Reusables

banner

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.

react-native-reusables-preview_0ZCslnn9.mp4

📖 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

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

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

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

Sheet (Drawer navigation)

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

About

Bringing shadcn/ui to React Native. Beautifully crafted components with Nativewind, open source, and almost as easy to use.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published