galoberlyn/react-native-reusables

Universal shadcn/ui for React Native: Copy, paste, and tailor components to suit your specific requirements.

Work in progress...

React Native Reusables

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 (wip): 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

2. Copy/paste what you need into your project (2 options)

   • Follow instructions in docs (work in progress)
   • Browse packages/reusables/src/components/ui/*
     1. Copy file in your project to ~/components/ui/*
     2. If it uses a primitive, replace @rnr/* with ~/components/primitives/*
     3. Copy the primitive to ~/components/primitives/*
     • If the primitive uses other primitives repeat steps 2 and 3.

For this repository:

1. Clone the repo: git clone https://github.com/mrzachnugent/react-native-reusables.git

2. Change directory into the cloned repo: cd react-native-reusables

3. Install the dependencies (IMPORTANT: Must use pnpm): pnpm i

4. Start up desired app

• 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 or check out the code

• NativeWind v4
• Dark and light mode
  • Android Navigation Bar matches mode
  • Persistant mode
• Common components
  • Icons, ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip

Backlog

• Documentation Project
  Backlog for documentation. If you'd like to contribute, assign yourself the issue and track its progression in the project's backlog.

• Add missing universal components
  Refactor native components missing in /ui that are found in /deprecated-ui and add their web components from ui/shadcn

• Create following custom native components
  Replace 3rd party packages with custom native components

  • Calendar
  • Toast

List of components

1. Accordion
2. Alert
3. Alert Dialog
4. Avatar
5. Badge
6. Bottom Sheet
7. Button
8. Calendar
9. Card
10. Checkbox
11. Combobox
12. Collapsible
13. Command
14. Context Menu
15. Data Table
16. Date Picker
17. Dialog
18. Dropdown Menu
19. Form
20. Input
21. Label
22. Material Top Tabs
23. Menubar
24. Navigation Menu
25. Popover
26. Progress
27. Radio-group
28. Select
29. Separator
30. Skeleton
31. Slider
32. Switch
33. Table
34. Tabs
35. Textarea
36. Toast
37. Toggle
38. Toggle Group
39. Tooltip

Note: Current screenshots are for the deprecated-ui components (new screenshots to come)

Accordion

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.08.53.mp4

Alert

Code

• UI
• Example

Alert Dialog

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-20.at.12.12.49.mp4

Avatar

Code

• UI
• Example

Badge

Code

• UI
• Example

Bottom Sheet

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.20.55.mp4

Button

Code

• UI
• Example

Calendar

Code

• UI
• Example

Card

Code

• UI
• Example

Checkbox

Code

• UI
• Example

Combobox

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.22.16.mp4

Collapsible

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.10.46.mp4

Command

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-20.at.19.56.19.mp4

Context Menu

Code

• UI
• Example

Data Table

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-30.at.17.26.32.mp4

Date Picker

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-21.at.15.30.57.mp4

Dialog

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-21.at.20.51.21.mp4

Dropdown Menu

Code

• UI
• Example

Form

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-30.at.14.01.12.mp4

Input

Code

• UI
• Example

Label

Code

• UI
• Example

Material Top Tabs

Code

• Example

Menubar

Code

• UI
• Example

Navigation Menu

Code

• UI
• Example

Popover

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.13.55.mp4

Progress

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.14.53.mp4

Radio-group

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-21.at.20.51.44.mp4

Select

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-21.at.20.52.24.mp4

Separator

Code

• UI
• Example

Skeleton

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.15.47.mp4

Slider

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.16.49.mp4

Switch

Code

• UI
• Example

Table

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-26.at.12.23.51.mp4

Tabs

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-23.at.16.18.01.mp4

Textarea

Code

• UI
• Example

Toast

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-23.at.17.59.46.mp4

Toggle

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.17.54.mp4

Toggle-group

Code

• UI
• Example

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-23.at.11.56.33.mp4

Tooltip

Code

• UI
• Example