rnr-docs.vercel.app Open in urlscan Pro
76.76.21.241  Public Scan

Form analysis
1 forms found in the DOM

javascript:void(0);

<form class="pagefind-ui__form svelte-e9gkc3" role="search" aria-label="Search this site" action="javascript:void(0);"><input class="pagefind-ui__search-input svelte-e9gkc3" type="text" placeholder="Search" autocapitalize="none"
    enterkeyhint="search"> <button class="pagefind-ui__search-clear svelte-e9gkc3 pagefind-ui__suppressed">Clear</button>
  <div class="pagefind-ui__drawer svelte-e9gkc3 pagefind-ui__hidden"> </div>
</form>

Text Content

Skip to content
rnr docs
Search
Cancel
Clear

GitHub
Demo
 * Getting Started
    * Introduction
    * Initial Setup
    * Common patterns

 * Components
    * Accordion
    * Alert Dialog
    * Aspect Ratio
    * Avatar
    * Badge
    * Button
    * Card
    * Checkbox
    * Collapsible
    * Context Menu
    * Dialog
    * Dropdown Menu
    * Hover Card
    * Input
    * Label
    * Menubar
    * Navigation Menu
    * Popover
    * Progress
    * Radio Group
    * Select
    * Separator
    * Skeleton
    * Switch
    * Table
    * Tabs
    * Text
    * Textarea
    * Toggle
    * Toggle Group
    * Tooltip
    * Typography

 * Extras
    * Android Navigation Bar
    * Keyboard
    * Material Top Tabs

 * Primitives
    * Overview
    * Core
       * Accordion
       * Alert Dialog
       * Aspect Ratio
       * Avatar
       * Checkbox
       * Collapsible
       * Context Menu
       * Dialog
       * Dropdown Menu
       * Hover Card
       * Label
       * Menubar
       * Navigation Menu
       * Popover
       * Progress
       * Radio Group
       * Select
       * Separator
       * Slider
       * Switch
       * Table
       * Tabs
       * Toast
       * Toggle
       * Toggle Group
       * Toolbar
       * Tooltip
   
    * Shared
       * Hooks
       * Portal
       * Slot
       * Types
       * Utils

GitHub
Demo
On this page
Overview
 * Overview
   * Universal shadcn/ui for React Native
   * Features
   * How to use
   * The react-native-reusables way


ON THIS PAGE

 * Overview
   * Universal shadcn/ui for React Native
   * Features
   * How to use
   * The react-native-reusables way


REACT NATIVE REUSABLES


UNIVERSAL SHADCN/UI FOR REACT NATIVE

Crafted with NativeWind v4 and accessibility in mind, react-native-reusables is
open source, offering a foundation for developing your own high-quality
component library.

Your browser does not support the video tag.

Purpose

Build your own component libraries with react-native-reusables. Copy, paste, and
tailor the code to suit your specific requirements.


FEATURES

 * Universal: Components, hooks, and utilities for Android, iOS, and the web
   applications.
 * Accessibility: Built with accessibility in mind. Using radix-ui/primitives
   for the web and re-usable react-native primitives.
 * Incremental adoption: Use as much or as little as you need at your own pace.
 * Code sharing: Share code between web and native applications.
 * Customization: The code lives in your project, not in your node_modules
   folder. You can customize it to your heart’s content.
 * Dark mode: Re-usable css variables for light and dark modes.


HOW TO USE

 1. Use a template or manually setup configuration
 2. Browse and copy/paste into your project
 3. Customize the code to suit your specific requirements

Note

Most components are built using primitives. This means that you will also need
to copy/paste the associated primitive in your project.


THE REACT-NATIVE-REUSABLES WAY

This project aims to provide as little opinionated code as possible. However,
some opinionated code is necessary to provide a consistent and easy-to-use
experience.

 * The CSS variable names are based on shadcn/ui’s naming convention.

 * Folder structure:
   
   * ~/components/primitives for unstyled accessible components which uses
     radix-ui/primitives for the web.
   * ~/components/ui for components styled with NativeWind. Most of these
     components are built using the primitives components.
   * ~/lib for utilities, hooks, and constants.

 * Directorycomponents/
    * Directoryprimitives/
       * …
   
    * Directoryui/
       * …

 * Directorylib/
    * …

Next
Initial Setup