Work in progress...
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.
react-native-reusables-preview_0ZCslnn9.mp4
📖 Read the docs: https://rnr-docs.vercel.app/
🌐 Try the web showcase: https://rnr-showcase.vercel.app/
For your own project:
-
Start with a template or manually setup configuration: Check out the docs
-
Browse the docs and use the CLI to add the components to your project
For this repository:
-
Fork this repo, then clone your fork on your machine.
-
Change directory into the cloned repo:
cd react-native-reusables
-
Install the dependencies (IMPORTANT: Must use pnpm):
pnpm i
-
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
- iOS:
- Starter-base
- iOS:
pnpm dev:starter-base
- Android:
pnpm dev:starter-base:android
- Web:
pnpm dev:starter-base:web
- iOS:
- Docs:
pnpm dev:docs
Starter-base:
Follow instructions or check out the code
Includes:
- NativeWind v4
- Dark and light mode
- Android Navigation Bar matches mode
- Persistent mode
- Common components
- ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip
RNR components are built on top of universal (iOS, Android, and Web) style agnostic (can be used with any styling system) react-native primitives which use radix-ui/primitives for the web.
The first draft of components with little to no focus on the web. The code remains for those who may still want to use it.
- RNR Base Bare by a0m0rajab: A simple app using Supabase as the backend, featuring sign-in/sign-up and profile functionality.
If you'd like to share a template you've made with react-native-reusables, feel free to open a PR. The format should replicate the other community template items
[Name of template](https://github.com/your-profile/your-template-repo) by [yourGithubHandle](https://github.com/yourGithubHandle): _A short description_