@rn-shad/ui

Beautiful React Native components with premium icons, smooth animations, and minimal setup.

Installation

npm install @rn-shad/ui react-native-svg react-native-reanimated react-native-gesture-handler

Usage

import { Button } from '@rn-shad/ui';
import { Heart } from '@rn-shad/ui';

function MyComponent() {
  return (
    <Button
      variant="default"
      size="md"
      icon={Heart}
      onPress={() => console.log('Pressed!')}
    >
      Like
    </Button>
  );
}

Components

This package includes essential UI building blocks:

• Button - Interactive button with multiple variants and icon support
• Text - Typography component with consistent styling
• Utilities: cn (className utility), color utilities

Utilities

cn

Utility function for conditional className merging:

import { cn } from '@rn-shad/ui';

const classes = cn(
  'base-class',
  isActive && 'active-class',
  isDisabled && 'disabled-class'
);

Color Utilities

import { colors, hexToRgb, addOpacity } from '@rn-shad/ui';

// Convert hex to RGB
const rgb = hexToRgb('#ff0000'); // { r: 255, g: 0, b: 0 }

// Add opacity to hex color
const withOpacity = addOpacity('#ff0000', 0.5); // 'rgba(255, 0, 0, 0.5)'

Note

For the full component library, we recommend using the rn-shad CLI:

npx rn-shad-cli init
npx rn-shad-cli add button input card

The CLI copies components directly to your project, giving you full control to customize them.

License

MIT