shadcn/ui-style UI Component Library for React Native – Reusables

Description:

React Native Reusables is a UI component library that adapts the popular shadcn/ui design philosophy to React Native environments.

It provides a collection of beautifully crafted and adaptable UI components built with Nativewind and React Native Primitives. Ideal for building universal mobile applications with consistent styling and behavior.

Features

• 💨 Nativewind Integration: It uses Nativewind to apply utility-first styling directly in your native components, creating a Tailwind CSS-like experience for React Native.
• 🧩 React Native Primitives: The library is built on a universal port of Radix UI primitives, which ensures a consistent API for component composition on native platforms.
• 📱 Mobile-First Adaptations: It addresses mobile-specific constraints, such as the absence of DOM portals and cascading styles, with solutions like PortalHost for modals and menus.
• 🚀 Native Performance: It leverages react-native-reanimated to deliver smooth animations and maintain native performance.
• 💡 Programmatic Control: Certain components, like dropdown menus, can be controlled programmatically using a ref for precise management of their state.
• 🎨 Extensive Component Library: A wide range of UI components are available, including buttons, forms, cards, dialogs, and navigation elements.

How to Use It

You can add React Native Reusables to your project through the command-line interface (CLI) or by following a manual setup process.

CLI Installation

The quickest way to start is by using the CLI. Open your terminal and run the initialization command to create a new project.

npx @react-native-reusables/cli@latest init

After initialization, you can add individual components as needed. For example, to add a button component, execute the following command.

npx @react-native-reusables/cli@latest add button

Once the component is added, you can import and use it directly in your screens.

import { Button } from '@/components/ui/button';
export default function MyScreen() {
  return <Button>Press Me</Button>;
}

Manual Installation

1. Follow the official Nativewind installation guide to integrate it into your project.

2. Modify your metro.config.js to set the inlineRem value to 16.

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './global.css', inlineRem: 16 });

3. Add the necessary peer dependencies to your project.

npx expo install tailwindcss-animate class-variance-authority clsx tailwind-merge @rn-primitives/portal

4. Render the PortalHost component from @rn-primitives/portal at the root of your application layout. This is necessary for components like dialogs and popovers.

// app/_layout.tsx
import { PortalHost } from '@rn-primitives/portal';
// ...
<ThemeProvider value={NAV_THEME[colorScheme]}>
  <Stack />
  <PortalHost />
</ThemeProvider>

5. Set up path aliases in your tsconfig.json for easier import paths.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

6. Add the CSS variables for light and dark themes to your global stylesheet. Then, update your tailwind.config.js to extend the theme with these variables and configure animations.

7. Create a utility function to merge Tailwind CSS classes.

// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

8. Create a components.json file in your project’s root to define the paths and configuration for the CLI.

9. After completing these steps, you can run the doctor command to verify that your setup is correct.

npx @react-native-reusables/cli@latest doctor

UI Components Included

• Accordion: A vertically stacked set of interactive headings that each reveal a section of content.
• Alert: A component that displays a short, important message in a way that attracts the user’s attention without interrupting their task.
• Alert Dialog: A modal dialog that interrupts the user’s workflow to communicate important information and require a response.
• Aspect Ratio: A container that maintains a specific aspect ratio for its child elements.
• Avatar: A component to represent a user, displaying an image, initials, or a fallback icon.
• Badge: A small component used to highlight an item’s status or count for quick recognition.
• Button: An interactive element that users can click or tap to trigger an action.
• Card: A container for grouping related information and actions about a single subject.
• Checkbox: An input control that allows a user to select one or more options from a set.
• Collapsible: A component that can expand or collapse a section of content.
• Context Menu: A menu that appears upon user interaction, such as a long-press, offering context-specific actions.
• Dialog: A window overlaid on either the primary window or another dialog window, requiring user interaction.
• Dropdown Menu: A menu that displays a list of choices when a user interacts with a button or control.
• Hover Card: A pop-up that displays information related to an element when the user’s pointer hovers over it.
• Input: A field that allows users to enter and edit text.
• Label: Text that provides a caption or identifier for another element in the user interface.
• Menubar: A horizontal menu bar that presents a list of commands or options to the user.
• Popover: A transient view that appears above other content onscreen when you tap a control or view.
• Progress: A visual indicator that displays the progress of a task or operation.
• Radio Group: A set of checkable buttons, known as radio buttons, where only one can be selected at a time.
• Select: A control that allows the user to choose one option from a dropdown list.
• Separator: A thin line used to group or divide content within a layout.
• Skeleton: A placeholder component that shows a preview of the loading content.
• Switch: A control that allows the user to toggle between two states, such as on or off.
• Tabs: A navigation component that allows users to switch between different views or sections of content.
• Text: A fundamental component for displaying text content.
• Textarea: An input field for multi-line text entry.
• Toggle: A button that can be switched between two states.
• Toggle Group: A set of toggle buttons where multiple options can be selected.
• Tooltip: A small pop-up that displays brief, informative text when a user hovers over or focuses on an element.

Related Resources

• shadcn/ui: The original React component library that inspired React Native Reusables. It provides a foundation for building accessible and customizable web components.
• Nativewind: The styling library that allows you to use Tailwind CSS directly in your React Native applications.
• Radix Primitives: A low-level, unstyled component library for building accessible design systems, which forms the basis for the components in this library.

FAQs

Q: How does styling differ from standard shadcn/ui?
A: React Native Reusables uses Nativewind instead of traditional Tailwind CSS. Each text element requires direct styling since React Native lacks cascading style inheritance. The color system uses CSS variables with HSL values.

Q: Can I use custom themes with this library?
A: Yes. Modify the CSS variables in your global.css file and update the corresponding values in theme.ts. The system supports both light and dark mode configurations with custom color palettes.

Q: How do I control components like dropdowns programmatically?
A: Some components use ref-based control instead of open/onOpenChange props. After layout calculation, you can call methods on the component refs to manage their visibility state.