@chain1/rn-ui-kit

Extended UI component library for React Native applications with theming support.

Features

• ✅ Pre-built UI components
• ✅ Light/Dark theme support
• ✅ TypeScript support
• ✅ Customizable styling
• ✅ Consistent design system
• ✅ Accessible components

Installation

npm install @chain1/rn-ui-kit

Peer Dependencies

npm install react-native react-native-vector-icons

Components

Card

Container component with variants.

import { Card } from '@chain1/rn-ui-kit';

<Card variant="elevated">
  <Text>Card content</Text>
</Card>

<Card variant="outlined">
  <Text>Outlined card</Text>
</Card>

Badge

Label component for status/tags.

import { Badge } from '@chain1/rn-ui-kit';

<Badge variant="success">Active</Badge>
<Badge variant="error" size="small">Error</Badge>
<Badge variant="primary" size="large">New</Badge>

Avatar

User avatar component.

import { Avatar } from '@chain1/rn-ui-kit';

<Avatar name="John Doe" size="medium" />
<Avatar source={{ uri: 'https://...' }} size={64} />
<Avatar name="Jane Smith" size="large" />

Divider

Horizontal/vertical separator.

import { Divider } from '@chain1/rn-ui-kit';

<Divider />
<Divider vertical thickness={2} />

Spinner

Loading indicator.

import { Spinner } from '@chain1/rn-ui-kit';

<Spinner variant="primary" />
<Spinner variant="white" size="large" />

Theming

Using Themes

import { Card, lightTheme, darkTheme } from '@chain1/rn-ui-kit';

<Card theme={darkTheme}>
  <Text>Dark themed card</Text>
</Card>

Custom Theme

import { Theme, lightTheme } from '@chain1/rn-ui-kit';

const customTheme: Theme = {
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    primary: '#FF0000',
  },
};

<Card theme={customTheme}>
  <Text>Custom themed card</Text>
</Card>

API Reference

Card Props

• children (ReactNode, required): Card content
• style (ViewStyle, optional): Custom styles
• theme (Theme, optional): Theme object
• variant ('default' | 'outlined' | 'elevated', optional): Card variant

Badge Props

• children (ReactNode, required): Badge text
• variant ('primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info', optional): Color variant
• size ('small' | 'medium' | 'large', optional): Badge size
• style (ViewStyle, optional): Container style
• textStyle (TextStyle, optional): Text style
• theme (Theme, optional): Theme object

Avatar Props

• source (ImageSource, optional): Image source
• name (string, optional): Name for initials
• size ('small' | 'medium' | 'large' | number, optional): Avatar size
• style (ViewStyle, optional): Container style
• imageStyle (ImageStyle, optional): Image style
• theme (Theme, optional): Theme object

Divider Props

• style (ViewStyle, optional): Custom styles
• theme (Theme, optional): Theme object
• vertical (boolean, optional): Vertical divider
• thickness (number, optional): Divider thickness

Spinner Props

• variant ('primary' | 'secondary' | 'white', optional): Color variant
• theme (Theme, optional): Theme object
• Extends all ActivityIndicator props

Theme Structure

interface Theme {
  colors: {
    primary: string;
    secondary: string;
    success: string;
    warning: string;
    error: string;
    info: string;
    background: string;
    surface: string;
    text: string;
    textSecondary: string;
    border: string;
    disabled: string;
  };
  spacing: {
    xs: number; // 4
    sm: number; // 8
    md: number; // 16
    lg: number; // 24
    xl: number; // 32
  };
  borderRadius: {
    sm: number; // 4
    md: number; // 8
    lg: number; // 16
    full: number; // 9999
  };
  typography: {
    fontSize: {
      xs: number; // 12
      sm: number; // 14
      md: number; // 16
      lg: number; // 18
      xl: number; // 24
      xxl: number; // 32
    };
    fontWeight: {
      normal: '400';
      medium: '500';
      semibold: '600';
      bold: '700';
    };
  };
}

License

MIT