Git Product home page Git Product logo

react-native-reusables's Introduction

Work in progress...

React Native Reusables

banner

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

Code

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

Code

Form

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

Input

Code

Label

Code

Material Top Tabs

Code

Menubar

Code

Navigation Menu

Code

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

react-native-reusables's People

Contributors

mrzachnugent avatar the-simian avatar tyrauber avatar trentcharlie avatar euanmorgan avatar ck-euan avatar josejpr avatar javascripter avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.