@heavenly/sdk

Official Heavenly branding and UI components SDK for React Native and Expo applications.

Features

• ✨ Glass Morphism UI: Beautiful glassmorphic cards with blur effects
• 🌌 Animated Backgrounds: Ethereal animated gradient backgrounds
• ⭐ Branding Components: Consistent Heavenly branding across apps
• 🎨 Theme Colors: Pre-defined color palette
• 📱 Cross-Platform: Works on iOS, Android, and Web

Installation

npm install @heavenly/sdk

Peer Dependencies

Make sure you have these installed:

npm install expo expo-blur expo-linear-gradient @expo/vector-icons react-native-reanimated

Components

GlassCard

A beautiful glassmorphic card component with blur and gradient effects.

import { GlassCard } from '@heavenly/sdk';

<GlassCard intensity={40} style={{ padding: 20 }}>
  <Text>Your content here</Text>
</GlassCard>

Props:

• intensity?: number - Blur intensity (default: 20)
• style?: StyleProp<ViewStyle> - Container styles
• contentStyle?: StyleProp<ViewStyle> - Inner content styles

AetherBackground

Animated gradient orb background with ethereal movement.

import { AetherBackground } from '@heavenly/sdk';

<View>
  <AetherBackground />
  <YourContent />
</View>

HeavenlyStar

Animated sparkling star icon with glow effect.

import { HeavenlyStar } from '@heavenly/sdk';

<HeavenlyStar size={60} color={Colors.dark.primary} />

Props:

• size?: number - Icon size (default: 24)
• color?: string - Icon color (default: gold)

Colors

import { Colors } from '@heavenly/sdk';

// Available colors
Colors.dark.primary     // Gold: #D4AF37
Colors.dark.secondary   // Purple: #9B59B6
Colors.dark.background  // Deep Black: #050505
Colors.dark.text        // Off-White: #F5F5F5

Usage Example

import React from 'react';
import { View, Text } from 'react-native';
import { AetherBackground, GlassCard, HeavenlyStar, Colors } from '@heavenly/sdk';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <AetherBackground />

      <GlassCard style={{ margin: 20 }}>
        <HeavenlyStar size={40} />
        <Text style={{ color: Colors.dark.text }}>
          Welcome to Heavenly
        </Text>
      </GlassCard>
    </View>
  );
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode
npm run dev

License

MIT © Heavenly