react-native-blueprint

A production-ready React Native UI component library built with NativeWind (Tailwind CSS) and shadcn/ui design patterns. Features 35+ fully customizable, accessible components for iOS, Android, and Web.

Features

• 🎨 35+ Components - Complete UI kit including buttons, forms, overlays, navigation, and data display
• 🌓 Dark Mode - Built-in theme support with CSS variables
• ♿ Accessible - ARIA-compliant components with screen reader support
• 📱 Cross-Platform - Works seamlessly on iOS, Android, and Web
• 🎯 Type-Safe - Full TypeScript support with IntelliSense
• 🚀 NativeWind - Tailwind CSS styling for React Native
• 🔧 Customizable - Easy to theme and extend with Tailwind utilities
• ⚡ Performant - Built on React Native Reanimated for smooth animations

Installation

npm install react-native-blueprint
# or
yarn add react-native-blueprint

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-native nativewind tailwindcss react-native-reanimated react-native-gesture-handler react-native-svg

Setup

1. Configure NativeWind:

Create or update tailwind.config.js:

const { hairlineWidth } = require('nativewind/theme');

module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/react-native-blueprint/src/**/*.{ts,tsx}',
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderWidth: {
        hairline: hairlineWidth(),
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};

2. Import global styles:

Create global.css and import the theme:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

3. Configure Metro:

Update metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: './global.css' });

Usage

Basic Example

import { Button, Card, Text, Input, Alert } from 'react-native-blueprint';
import { View } from 'react-native';

function App() {
  return (
    <View className="flex-1 p-4 bg-background">
      <Card>
        <Card.Header>
          <Card.Title>Welcome</Card.Title>
          <Card.Description>Get started with react-native-blueprint</Card.Description>
        </Card.Header>
        <Card.Content>
          <Input placeholder="Enter your name" />
        </Card.Content>
        <Card.Footer>
          <Button>
            <Text>Submit</Text>
          </Button>
        </Card.Footer>
      </Card>

      <Alert>
        <Alert.Title>Info</Alert.Title>
        <Alert.Description>
          This is a sample alert component.
        </Alert.Description>
      </Alert>
    </View>
  );
}

Available Components

Layout & Structure

• Button - Customizable button with variants (default, destructive, outline, ghost, link)
• Card - Container with header, content, and footer sections
• Separator - Horizontal or vertical divider
• Skeleton - Loading placeholder with shimmer effect

Form Components

• Input - Text input field
• Textarea - Multi-line text input
• Checkbox - Checkbox with label support
• Radio Group - Radio button group
• Switch - Toggle switch
• Select - Dropdown select menu
• Label - Form field label
• Slider - Range slider input

Navigation

• Tabs - Tab navigation component
• Accordion - Collapsible content sections
• Collapsible - Expandable/collapsible content
• Menubar - Menu bar with nested items

Overlays & Dialogs

• Dialog - Modal dialog
• Alert Dialog - Alert/confirmation dialog
• Popover - Floating popover
• Tooltip - Hover tooltip
• Dropdown Menu - Context menu dropdown
• Context Menu - Right-click context menu
• Hover Card - Card that appears on hover

Feedback & Status

• Alert - Informational alert box
• Toast - Toast notification
• Progress - Progress bar
• Badge - Status badge

Data Display

• Table - Data table with sorting
• Avatar - User avatar with fallback
• Text - Typography component with variants
• Icon - Icon component (powered by lucide-react-native)

Utilities

• Aspect Ratio - Container with fixed aspect ratio
• Toggle - Toggle button
• Toggle Group - Group of toggle buttons

Theming

Components use CSS variables for theming. Customize your app's appearance by modifying the CSS variables in global.css:

:root {
  --primary: 220 90% 56%;        /* Blue */
  --secondary: 280 70% 60%;      /* Purple */
  --destructive: 0 84% 60%;      /* Red */
  --radius: 0.75rem;             /* Border radius */
}

Dark Mode

Toggle dark mode by adding/removing the dark class on your root element:

import { useColorScheme } from 'react-native';

function App() {
  const colorScheme = useColorScheme();

  return (
    <View className={colorScheme === 'dark' ? 'dark' : ''}>
      {/* Your app */}
    </View>
  );
}

Example App

Check out the /example directory for a complete demo app showcasing all components:

cd example
npm install
npm run ios     # Run on iOS simulator
npm run android # Run on Android emulator

TypeScript Support

All components are fully typed with TypeScript. Import types as needed:

import type { ButtonProps, CardProps } from 'react-native-blueprint';

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Workflow

1. Clone the repo and install dependencies:

   git clone https://github.com/campx-org/react-native-blueprint.git
   cd react-native-blueprint
   yarn install

2. Run the example app:

   yarn example ios
   # or
   yarn example android

3. Make your changes in /src

4. Run type checking and linting:

   yarn typecheck
   yarn lint

5. Build the library:

   yarn prepare

License

MIT © CAMPX

Credits

• Built with create-react-native-library
• Inspired by shadcn/ui
• Styled with NativeWind
• Primitives from @rn-primitives

Support

• GitHub Issues: Report a bug
• Discussions: Ask questions

Made with ❤️ by CAMPX