Core Components

Core components provide the foundation for essential app functionality in LaunchKit.

Components Overview (/components)

AvatarCropper.tsx

Interactive image cropping component for user avatars.

Features:

• Drag and zoom functionality
• Preview before saving
• Aspect ratio constraints
• Export to various formats

Usage:

import AvatarCropper from '@/components/AvatarCropper';

<AvatarCropper
  image={selectedImage}
  onCropComplete={(croppedImage) => {
    // Handle cropped image
    uploadAvatar(croppedImage);
  }}
  aspectRatio={1} // 1:1 for circular avatars
/>

AvatarUpload.tsx

Complete avatar upload workflow with cropping.

Features:

• File selection and validation
• Integrated cropping interface
• Supabase storage upload
• Profile update on success

Usage:

import AvatarUpload from '@/components/AvatarUpload';

<AvatarUpload
  userId={user.id}
  currentAvatarUrl={profile.avatar_url}
  onUploadComplete={(newAvatarUrl) => {
    // Avatar uploaded successfully
    setProfile(prev => ({ ...prev, avatar_url: newAvatarUrl }));
  }}
/>

LayoutClient.tsx

Client-side layout wrapper with theme and auth context.

Features:

• Theme provider integration
• Authentication state management
• Global loading states
• Toast notifications

Modal.tsx

Reusable modal component with accessibility features.

Features:

• Keyboard navigation (ESC to close)
• Focus trap for accessibility
• Backdrop click to close
• Customizable sizes and animations

Usage:

import Modal from '@/components/Modal';

<Modal
  isOpen={showModal}
  onClose={() => setShowModal(false)}
  title="Confirm Action"
  size="md"
>
  <p>Are you sure you want to proceed?</p>
  <div className="flex gap-2 mt-4">
    <Button onClick={handleConfirm}>Confirm</Button>
    <Button variant="outline" onClick={() => setShowModal(false)}>
      Cancel
    </Button>
  </div>
</Modal>

UserAvatar.tsx

Displays user avatar with fallback to initials.

Features:

• Automatic initials generation
• Size variants (sm, md, lg, xl)
• Online status indicator
• Lazy loading

Usage:

import UserAvatar from '@/components/UserAvatar';

<UserAvatar
  user={user}
  size="lg"
  showOnlineStatus={true}
  className="border-2 border-primary"
/>

theme-provider.tsx

Next.js theme context provider for dark/light mode.

Features:

• System theme detection
• Persistent theme preference
• Smooth theme transitions
• Theme-aware components