You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Universal [shadcn/ui](https://ui.shadcn.com) for React Native
5
+
## Universal [shadcn/ui](https://ui.shadcn.com) for React Native featuring a focused collection of components
6
6
7
7
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.
**🌐 Try the web showcase:**https://rnr-showcase.vercel.app/
11
+
### Get started with our [📖 Docs](https://rnr-docs.vercel.app/getting-started/initial-setup/) or checkout the [🌐 web demo](https://rnr-showcase.vercel.app/)
14
12
15
13
### How to use
16
14
17
-
**For your own project:**
15
+
1. Follow our [documentation](https://rnr-docs.vercel.app/getting-started/initial-setup/) to get started with a template or with a manual configuration.
16
+
17
+
2. Browse our [components](https://rnr-docs.vercel.app/components/accordion/) and use the CLI to add the components to your project
This project includes only components built without third-party libraries or those that use [@rn-primitives](https://rn-primitives.com)_(universal radix-ui/primitives)_.
30
+
31
+
### Excluded components
32
+
33
+
Only **14 out of the 50** shadcn/ui components are excluded from this library. However, you can use the following packages or repositories to build your own
34
+
35
+
#### Calendar
36
+
37
+
-[React Native Flash Calendar](https://github.com/MarceloPrado/flash-calendar): An incredibly fast and flexible library to build calendars in React Native.
38
+
39
+
#### Carousel
40
+
41
+
-[React Native ScrollView](https://www.appcoda.com/scrollview-paging/): An article explaining how to create a carousel using the ScrollView component.
42
+
43
+
#### Chart
44
+
45
+
-[Victory Native](https://github.com/FormidableLabs/victory-native-xl): A charting library for React Native with a focus on performance and customization.
46
+
47
+
#### Combobox
48
+
49
+
_TBD_
50
+
51
+
#### Command
52
+
53
+
_TBD_
54
+
55
+
#### Data Table
56
+
57
+
-[Tanstack Table](https://tanstack.com/table/latest): Headless UI for building powerful tables & datagrids
58
+
59
+
#### Date Picker
60
+
61
+
-[React Native DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker): React Native date & time picker component for iOS, Android and Windows
62
+
63
+
#### Drawer
64
+
65
+
-[Universal Bottom Sheet](https://github.com/adebayoileri/universal-bottom-sheet) by [adebayoileri](https://github.com/adebayoileri): A bottom sheet component that combines Gorhom Bottom Sheet and Vaul for seamless and responsive experience across both mobile and web.
66
+
67
+
#### Form
18
68
19
-
1. Start with a template or manually setup configuration: [Check out the docs](https://rnr-docs.vercel.app/getting-started/initial-setup/)
69
+
-[React Hook Form](https://react-hook-form.com/get-started#ReactNative): Performant, flexible and extensible forms with easy-to-use validation.
20
70
21
-
2. Browse the [docs](https://rnr-docs.vercel.app/) and use the CLI to add the components to your project
71
+
#### Input OTP
22
72
23
-
**For this repository:**
73
+
_TBD_
74
+
75
+
#### Resizable
76
+
77
+
_TBD_
78
+
79
+
#### Scroll Area
80
+
81
+
-[React Native ScrollView](https://reactnative.dev/docs/scrollview): A generic scrolling container that can host multiple components and views.
82
+
83
+
#### Sheet (Drawer navigation)
84
+
85
+
-[Drawer navigation](https://reactnavigation.org/docs/drawer-based-navigation/): A drawer navigation component that slides in from the side.
86
+
87
+
#### Sonner
88
+
89
+
_TBD_
90
+
91
+
### Community Templates
92
+
93
+
Explore community-created components and templates that extend the core library and fill in missing shadcn/ui elements. Contributions are welcome!
94
+
95
+
-[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._
96
+
97
+
## How to contribute
24
98
25
99
1. Fork this repo, then clone your fork on your machine.
Explore community-created components and templates that extend the core library and fill in missing shadcn/ui elements. Contributions are welcome!
46
-
47
-
#### Components
48
-
49
-
-[universal-bottom-sheet](https://github.com/adebayoileri/universal-bottom-sheet) by [adebayoileri](https://github.com/adebayoileri): A bottom sheet component that combines Gorhom Bottom Sheet and Vaul for seamless and responsive experience across both mobile and web.
50
-
51
-
#### Templates
52
-
53
-
-[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._
54
-
55
-
<br/>
56
-
57
-
> 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
58
-
59
-
```md
60
-
[Name of template/component](https://github.com/your-profile/your-template-repo) by [yourGithubHandle](https://github.com/yourGithubHandle): _A short description_
61
-
```
62
-
63
-
### `rn-primitives`
117
+
5. Add and commit your changes
64
118
65
-
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.
> 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.
70
124
71
-
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.
Copy file name to clipboardExpand all lines: apps/docs/src/content/docs/getting-started/introduction.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ Crafted with [NativeWind v4](https://www.nativewind.dev/v4/overview) and accessi
32
32
<br />
33
33
34
34
<Cardtitle="Project Scope">
35
-
Only components built without third-party libraries or that use @rn-primitives (where radix-ui/primitives is used on the web) are included. Components depending on other third-party libraries are not part of this project. However, we will maintain a [list of libraries and repositories](https://github.com/mrzachnugent/react-native-reusables?tab=readme-ov-file#community) to help you find or create these additional components.
35
+
This project includes only components built without third-party libraries or those that use [@rn-primitives](https://rn-primitives.com)_(universal radix-ui/primitives)_. However, we have a [list](https://github.com/mrzachnugent/react-native-reusables?tab=readme-ov-file#project-scope) of libraries and repositories to help you find or create these additional components.
0 commit comments