Work in progress...

React Native Reusables

Powered by Expo and styled with NativeWind v4

shadcn/ui for React Native with the purpose to be used to build your own 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. 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

Backlog

1. Create a documentation website (in progress)
   Document initial setup, installation, and use for each component with their dependencies

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

3. Tackle all commented TODOs

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

Note: Current screenshots are for deprecated-ui (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