​
50+ Ready-to-Use Components

social.plus UIKit provides the most comprehensive library of social UI components - everything you need to build engaging social applications. Each component is battle-tested, highly customizable, and works across all platforms.

🚀 Get Started

Start building in 15 minutes with our quick setup guide

👀 See Code Examples

Copy-paste ready examples for all platforms

🌟 Social Feed

Used by 89% of developersComplete feed with posts, comments, reactions, and infinite scroll
<AmityFeedComponent />

💬 Chat

95% developer satisfactionReal-time messaging with media, emojis, and group support
<AmityChatComponent />

📸 Stories

NEW: 40% boost in engagementInstagram-style stories with creation and viewing
<AmityStoryComponent />

​
🏗️ Component Categories

​
💬 Chat Components

Build real-time messaging experiences with our chat components:

Conversation Chat

One-on-one and group messaging with rich media support

Live Chat

Real-time chat for live streams and events

Recent Chats

Chat list management and channel organization

​
🌟 Social Components

Create comprehensive social experiences:

Social Feeds

Dynamic content feeds with infinite scroll and real-time updates

Posts & Comments

Rich post creation, editing, and threaded comments

Reactions

Like, love, and custom reaction systems

Communities

Community creation, management, and member interactions

User Profiles

User profiles, social connections, and relationship management

Content Moderation

Built-in safety tools and content moderation features

​
📱 Story Components

NEW in UIKit 4 - Create engaging ephemeral content:

Story Creation

Rich story creation with media, text overlays, and effects

Story Viewing

Immersive story viewing experience with user interactions

​
🚀 Quick Integration Examples

Copy and paste these examples to get started quickly:
Most popular starting point - complete social feed in 30 seconds
import { AmityFeedComponent } from '@amityco/social-plus-uikit-react-native';

export default function FeedScreen() {
  return (
    <AmityFeedComponent 
      communityId="your-community-id"
      onPostClick={handlePostClick}
    />
  );
}
What you get: Posts, comments, reactions, infinite scroll, real-time updates
🎉 That’s it! Each component works out of the box with sensible defaults. Customize colors, layout, and behavior as needed.

​
Component Features

​
🎨 Fully Customizable

  • Theming System: Light/dark modes and custom color schemes
  • Layout Control: Flexible layouts that adapt to your design
  • Brand Integration: Match your exact brand guidelines
  • Dynamic Updates: Real-time customization without app updates

​
⚡ Performance Optimized

  • Lazy Loading: Components load only when needed
  • Memory Efficient: Optimized for mobile devices
  • Smooth Animations: 60fps interactions and transitions
  • Caching: Intelligent caching for better performance

​
🌐 Cross-Platform

  • Consistent API: Same component interface across all platforms
  • Platform Optimization: Native performance on each platform
  • Responsive Design: Adapts to different screen sizes
  • Accessibility: Built-in accessibility features

​
Getting Started with Components

​
Basic Integration

Most UIKit components follow a similar integration pattern: 
import { SocialFeed } from '@socialplus/uikit-react';

function MyApp() {
  return (
    <SocialFeed
      communityId="your-community-id"
      onPostClick={handlePostClick}
      customization={{
        theme: 'light',
        primaryColor: '#1054DE'
      }}
    />
  );
}

​
Component Lifecycle

All UIKit components follow a consistent lifecycle:
1

Initialize

Create component instance with required parameters
2

Configure

Set customization options, event handlers, and data sources
3

Present

Add component to your view hierarchy
4

Interact

Handle user interactions and component events
5

Clean Up

Properly dispose of resources when component is no longer needed

​
Component Architecture

​
Data Flow

UIKit components use a unidirectional data flow pattern:
  1. Props/Parameters: Configuration and data passed to components
  2. State Management: Internal component state handled automatically
  3. Events: User interactions and component events bubble up
  4. Updates: Data changes trigger efficient UI updates

​
Customization Layers

Components support multiple levels of customization:
  1. Global Theme: Applied to all components
  2. Component Theme: Specific to component type
  3. Instance Configuration: Per-component customization
  4. Dynamic Updates: Real-time theme changes

​
Best Practices

​
Performance

  • Lazy Load: Only initialize components when needed
  • Optimize Images: Use appropriate image sizes and formats
  • Cache Management: Implement proper caching strategies
  • Memory Management: Dispose of components properly

​
User Experience

  • Loading States: Show appropriate loading indicators
  • Error Handling: Gracefully handle network and data errors
  • Accessibility: Ensure components are accessible to all users
  • Responsive Design: Test on various screen sizes

​
Development

  • Component Composition: Combine components for complex UIs
  • Event Handling: Implement proper event handling patterns
  • Testing: Write tests for component integration
  • Documentation: Document custom implementations

​
What’s Next?

Ready to start building with UIKit components?

Browse Components

Explore detailed documentation for each component category

See Examples

View real-world implementation examples and code samples

Customization Guide

Learn how to customize components to match your brand

Platform Guides

Platform-specific implementation details and best practices
Need a specific component? If you don’t see a component that fits your needs, check our component roadmap or contact our team to discuss custom development options.