Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
ExpoUniversalExpo Go
React Native Reusables
shadcn/ui brought to React Native: copy-and-paste components and auth blocks for iOS, Android, and web, styled with Nativewind or Uniwind.
39 published items
Founded Labs
39 published items
A modal dialog that interrupts the user with important content and expects a response.
ExpoUniversalExpo Go
An image element with a fallback for representing the user.
ExpoUniversalExpo Go
Displays a badge or a component that looks like a badge.
ExpoUniversalExpo Go
Displays a button or a component that looks like a button.
ExpoUniversalExpo Go
A control that allows the user to toggle between checked and not checked.
ExpoUniversalExpo Go
Accordion
An interactive component that expands or collapses a panel of content.
ExpoUniversalExpo Go
Displays a menu of actions or functions, opened by a right click on web or a long press on native.
ExpoUniversalExpo Go
Overlay
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
ExpoUniversalExpo Go
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
ExpoUniversalExpo Go
A form that sends a password reset OTP to the user's email address.
ExpoUniversalDev client
For sighted users to preview content available behind a link.
ExpoUniversalExpo Go
Primitive
A wrapper that renders any Lucide icon with utility classes and inherits the surrounding text color.
ExpoUniversalExpo Go
Displays a form input field or a component that looks like an input field.
ExpoUniversalExpo Go
Renders an accessible label associated with controls.
ExpoUniversalExpo Go
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
ExpoUniversalExpo Go
A view that animates with Reanimated on iOS and Android and renders its children unchanged on web.
ExpoUniversalExpo Go
Displays rich content in a portal, triggered by a button.
ExpoUniversalExpo Go
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
ExpoUniversalExpo Go
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
ExpoUniversalExpo Go
A form for resetting a password with an OTP sent via email.
ExpoUniversalDev client
Displays a list of options for the user to pick from—triggered by a button.
ExpoUniversalExpo Go
Separator
Visually or semantically separates content.
ExpoUniversalExpo Go
A form for signing in using email and password or social providers.
ExpoUniversalDev client
A form for creating an account with email and password or social providers.
ExpoUniversalDev client
Use to show a placeholder while content is loading.
ExpoUniversalExpo Go
A set of buttons for authenticating through social providers.
ExpoUniversalDev client
A control that allows the user to toggle between on and off.
ExpoUniversalExpo Go
A set of layered sections of content—known as tab panels—that are displayed one at a time.
ExpoUniversalExpo Go
Displays a form textarea or a component that looks like a textarea.
ExpoUniversalExpo Go
A two-state button that can be either on or off.
ExpoUniversalExpo Go
A set of two-state buttons that can be toggled on or off.
ExpoUniversalExpo Go
A popup that displays information related to an element when the element receives keyboard focus, the mouse hovers over it, or when it is pressed.
ExpoUniversalExpo Go
A popover menu presenting options and actions for the current user.
ExpoUniversalDev client
A form for verifying an email address with an OTP sent via email.
ExpoUniversalDev client
Bringing the shadcn/ui experience to React Native
Built with familiar tools and libraries, it follows consistent styling, structure, and naming conventions, letting you use your favorite design system to create beautiful universal apps. Every item is a file you own: add it, then change it.
Key differences from shadcn/ui
- Nativewind or Uniwind: a Tailwind-like experience adapted for React Native. Every item ships in both flavors; pick the one matching your styling engine.
- RN Primitives: a universal port of Radix UI primitives for React Native with an almost identical API, enabling consistent composition on native platforms. See https://rnprimitives.com
- Portals: React Native doesn't support DOM portals. On native platforms, components like modals and menus need a
PortalHostmounted at the root of the app. - No cascading styles: child elements like
Textcan't inherit styles from a parent class. Each element must be styled directly. A smallTextClassContextworkaround letsTextinherit from components likeButton. - No data attributes: React Native doesn't support
data-*attributes, so variants rely on props or state on native platforms. - Reanimated: uses
react-native-reanimatedfor smooth, native performance. - Icons: a wrapper component combined with a Lucide icon avoids wrapping every imported icon individually, for example
<Icon as={LeftArrowIcon} />. - Programmatic control: some components, such as
DropdownMenu, can't be controlled withopenoronOpenChangeprops. Instead, arefmanages open and close behavior after layout calculation.
React Native Reusables aims to stay true to the spirit of shadcn/ui while adapting it to the unique constraints of mobile and universal development.
Getting started
New project: npx @react-native-reusables/cli@latest init creates an Expo app with everything configured. Existing project: add any item and follow the guide that comes with it.