Work in progress...

React Native Reusables

Powered by Expo and styled with NativeWind v4

Inspired by ui.shadcn.com with the purpose to be used to build your own mobile component libraries. Copy, paste, and tailor the code to suit your specific requirements.

Table of contents

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. Menubar 🔜
23. Navigation Menu 🔜
24. Popover
25. Progress
26. Radio-group
27. Select
28. Separator
29. Skeleton
30. Slider
31. Switch
32. Table
33. Tabs
34. Textarea
35. Toast
36. Toggle
37. Toggle Group
38. Tooltip

Roadmap

1. Styled Native-Focused Expo-Go Components - 34 ✅ / 38
   Quick start for your own components

2. Unstyled Universal A11y Components (rn-primitives)
   Style agnostic and accessible components that will later be made into it's own library. It uses radix-ui/primitives for the web and native equivalents for native components

3. Create POC universal components
   Build components while ensuring rn-primitives works as intended

4. Release rn-primitives on npm, use it as a dependency and finalize first version of universal components.

5. Create a documentation website

6. Complete Github Community Standards Checklist
   Code of conduct, Contributing, Security policy, Issue templates, and Pull request template

Tool for creating your own theme
If you want inspiration for your own theme, check out: https://ui.jln.dev/. And make sure you use .dark:root as the selector in your css file instead of .dark

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

(soon)

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

(soon)

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

Menubar

(soon)

Navigation Menu

(soon)

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

Initial Plan

• Make accessible components for React-Native applications that can be copy/pasted
• Will require additional libraries (and list libraries per component)
• Most components to be compatible with Expo Go, while others will require expo-dev-client
• Might offer alternatives for components that cannot be used in Expo Go
• Focused on mobile development, for web components you can use ui by shadcn. Here's a great example: https://github.com/EvanBacon/expo-shadcn-ui-demo and a combined example: https://github.com/EvanBacon/expo-router-better-web-drawers-example
• Standardize components API (ex: value/set value, root component props VS sub-components props)