Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrzachnugent/react-native-reusables
Universal shadcn/ui for React Native: Copy, paste, and tailor components to suit your specific requirements.
https://github.com/mrzachnugent/react-native-reusables
expo radix-ui react-native react-native-web shadcn-ui
Last synced: 3 months ago
JSON representation
Universal shadcn/ui for React Native: Copy, paste, and tailor components to suit your specific requirements.
- Host: GitHub
- URL: https://github.com/mrzachnugent/react-native-reusables
- Owner: mrzachnugent
- License: mit
- Created: 2023-12-16T16:47:00.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-30T13:50:24.000Z (3 months ago)
- Last Synced: 2024-07-30T17:29:48.262Z (3 months ago)
- Topics: expo, radix-ui, react-native, react-native-web, shadcn-ui
- Language: TypeScript
- Homepage: https://rnr-docs.vercel.app
- Size: 17.5 MB
- Stars: 2,508
- Watchers: 26
- Forks: 106
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-shadcn-ui - React Native - React Native port of shadcn/ui (recommended) (Ports / Portfolios)
- awesome-shadcn-ui - React Native - Universal shadcn/ui for React Native featuring a focused collection of components. (Ports)
- awesome-shadcn-ui - React Native - Universal shadcn/ui for React Native featuring a focused collection of components. (Ports)
README
_Work in progress..._
# React Native Reusables
## Universal [shadcn/ui](https://ui.shadcn.com) for React Native
Crafted with [NativeWind v4](https://www.nativewind.dev/v4/overview) 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
**📖 Read the docs**: https://rnr-docs.vercel.app/
**🌐 Try the web showcase:** https://rnr-showcase.vercel.app/
### How to use
**For your own project:**
1. Start with a template or manually setup configuration: [Check out the docs](https://rnr-docs.vercel.app/getting-started/initial-setup/)
2. Browse the [docs](https://rnr-docs.vercel.app/) and use the CLI to add the components to your project
**For this repository:**
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`
### Templates
**Starter-base:**
Follow [instructions](https://rnr-docs.vercel.app/getting-started/initial-setup/) or check out the [code](apps/starter-base)
**Includes:**
- NativeWind v4
- Dark and light mode
- Android Navigation Bar matches mode
- Persistent mode
- Common components
- ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip
### `rn-primitives`
RNR components are built on top of universal _(iOS, Android, and Web)_ style agnostic _(can be used with any styling system)_ [react-native primitives](https://rn-primitives.vercel.app/) which use [radix-ui/primitives](https://www.radix-ui.com/primitives) for the web.
### Deprecated-UI
[See screenshots](/packages/reusables/src/components/deprecated-ui/README.md)
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.
#### Community Templates
- [RNR Base Bare](https://github.com/a0m0rajab/rnr-base-bare) by [a0m0rajab](https://github.com/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
```md
[Name of template](https://github.com/your-profile/your-template-repo) by [yourGithubHandle](https://github.com/yourGithubHandle): _A short description_
```