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

Roadmap

1. Styled Native-Focused Expo-Go Components - 34 ✅ / 37
2. Quick start for your own components
3. Unstyled Native-Focused A11y Components (rn-primitives)
4. Style agnostic accessible like radix-ui/primitives for ios and android components
5. Look into options to seamlessly combine web primitives from external library and rn-primitives.

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)

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

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

GitHub

View Github