Skip to content

Copy, paste, and tailor React Native components to suit your specific requirements.

License

Notifications You must be signed in to change notification settings

ck-euan/react-native-reusables

 
 

Repository files navigation

Work in progress...

React Native Reusables

banner

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
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-19.at.17.08.53.mp4

Alert

Code

Alert Dialog

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

Avatar

Code

Badge

Code

Bottom Sheet

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

Button

Code

Calendar

Code

Card

Code

Checkbox

Code

Combobox

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

Collapsible

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

Command

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

Context Menu

(soon)

Data Table

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

Date Picker

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

Dialog

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

Dropdown Menu

(soon)

Form

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

Input

Code

Label

Code

Menubar

(soon)

Navigation Menu

(soon)

Popover

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

Progress

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

Radio-group

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

Select

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

Separator

Code

Skeleton

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

Slider

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

Switch

Code

Table

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

Tabs

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

Textarea

Code

Toast

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

Toggle

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

Toggle-group

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

Tooltip

Code
Initial Plan

About

Copy, paste, and tailor React Native components to suit your specific requirements.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.3%
  • Other 0.7%