Skip to content

Commit 6accd4d

Browse files
committed
update README
1 parent 1d9c344 commit 6accd4d

File tree

2 files changed

+87
-33
lines changed

2 files changed

+87
-33
lines changed

README.md

Lines changed: 86 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,99 @@
22

33
![banner](https://github.com/mrzachnugent/react-native-reusables/assets/63797719/0eef0a6d-d8eb-4b52-a97d-fa3b1e534215)
44

5-
## 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
66

77
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.
88

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

11-
**📖 Read the docs**: https://rnr-docs.vercel.app/
12-
13-
**🌐 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/)
1412

1513
### How to use
1614

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
18+
19+
#### Upcoming components
20+
21+
- [Alert](https://ui.shadcn.com/docs/components/alert)
22+
- [Breadcrumb](https://ui.shadcn.com/docs/components/breadcrumb)
23+
- [Pagination](https://ui.shadcn.com/docs/components/pagination)
24+
- [Slider](https://ui.shadcn.com/docs/components/slider)
25+
- [Toast](https://ui.shadcn.com/docs/components/toast)
26+
27+
## Project Scope
28+
29+
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
1868

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.
2070

21-
2. Browse the [docs](https://rnr-docs.vercel.app/) and use the CLI to add the components to your project
71+
#### Input OTP
2272

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
2498

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

@@ -40,32 +114,12 @@ https://github.com/mrzachnugent/react-native-reusables/assets/63797719/ae7e074f-
40114
- Web: `pnpm dev:starter-base:web`
41115
- Docs: `pnpm dev:docs`
42116

43-
## Community
44-
45-
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
64118

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.
119+
6. Make a pull request
66120

67121
### Deprecated-UI
68122

69-
[See screenshots](/packages/reusables/src/components/deprecated-ui/README.md)
123+
> 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.
70124
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.
125+
[View deprecated components](/packages/reusables/src/components/deprecated-ui/README.md)

apps/docs/src/content/docs/getting-started/introduction.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Crafted with [NativeWind v4](https://www.nativewind.dev/v4/overview) and accessi
3232
<br />
3333

3434
<Card title="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.
3636
</Card>
3737

3838
### How to use

0 commit comments

Comments
 (0)