> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-auto-generate-llmstxt.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Social Feeds & Content Discovery

> Complete social home page experience with feeds, content creation, community discovery, and user engagement components

<Info>
  **Key Benefit**: Build comprehensive social experiences with pre-built components for content feeds, community discovery, post creation, and user engagement - all designed to work seamlessly together in a social home page.
</Info>

## Feature Overview

The Social Feeds & Content Discovery UIKit provides a complete suite of components for building engaging social home experiences. From dynamic newsfeeds and story displays to community discovery and content creation tools, these components create the foundation for modern social applications.

<CardGroup cols={2}>
  <Card title="Content Feeds" icon="newspaper">
    **Dynamic Social Streams**

    * Global newsfeed with posts and stories
    * Real-time content updates and interactions
    * Empty state handling and loading
    * Post engagement (likes, comments, shares)
  </Card>

  <Card title="Content Creation" icon="plus">
    **User-Generated Content**

    * Post and story creation menus
    * Multiple content types support
    * Target audience selection
    * Quick creation workflows
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Community Discovery" icon="compass">
    **Explore & Connect**

    * Community categories browsing
    * Recommended communities
    * Trending communities display
    * Discovery optimization
  </Card>

  <Card title="Navigation & Organization" icon="bars">
    **Seamless User Experience**

    * Tab-based navigation system
    * Custom navigation behaviors
    * Feed organization and filtering
    * User flow optimization
  </Card>
</CardGroup>

## Implementation Guide

<Tabs>
  <Tab title="Social Home Page">
    **Complete social home experience**

    The AmitySocialHomePage serves as the central hub integrating multiple social components for a comprehensive user experience.

    ### Features

    | Feature                | Description                                                                              |
    | ---------------------- | ---------------------------------------------------------------------------------------- |
    | Global Feed Navigation | Navigate through different segments like newsfeed, explore, my communities               |
    | Newsfeed Viewing       | Displays recent posts, updates, and activities from connections and followed communities |
    | Community Access       | Quick access to user communities with options to join more                               |
    | Engagement Options     | Like, comment, and interact with posts directly from the page                            |

    ### Customization Options

    | Config ID                                  | Type    | Description          |
    | ------------------------------------------ | ------- | -------------------- |
    | `social_home_page/*/*`                     | Page    | Customize page theme |
    | `social_home_page/*/newsfeed_button`       | Element | Customize text       |
    | `social_home_page/*/explore_button`        | Element | Customize text       |
    | `social_home_page/*/my_communities_button` | Element | Customize text       |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let socialHomePage = AmitySocialHomePage()
      let viewController = AmitySwiftUIHostingController(rootView: socialHomePage)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeSocialHomePage() {
          AmitySocialHomePage()
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityUIKitProvider, AmitySocialHomePage } from '@amityco/ui-kit';

      const SampleSocialHomePage = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmitySocialHomePage />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import { AmitySocialHomePage, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';
      import config from '../../uikit.config.json';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmitySocialHomePage />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget socialHomePage() {
        return AmitySocialHomePage();
      }
      ```
    </CodeGroup>

    <Note>
      **Navigation Customization**: Custom navigation behavior can be implemented to enhance interaction flow, including overriding default actions for global search or community search.
    </Note>

    ### Navigation Behavior

    Custom navigation behavior can be implemented to enhance or modify the interaction flow on the AmitySocialHomePage.

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmitySocialHomePageBehavior: AmitySocialHomePageBehavior {
          override init() {
              super.init()
          }
          
          override func goToGlobalSearch(context: AmitySocialHomePageBehavior.Context) {
              // Custom implementation for navigating to Global Search
          }
          
          override func goToCommunitySearch(context: AmitySocialHomePageBehavior.Context) {
              // Custom implementation for navigating to Community Search
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setSocialHomePageBehaviour() {
          let customBehavior = CustomAmitySocialHomePageBehavior()
          AmityUIKit4Manager.behaviour.socialHomePageBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomSocialHomePageBehavior : AmitySocialHomePageBehavior() {
          override fun goToGlobalSearch(context: Context) {
              // custom implementation for navigating to Global Search
          }

          override fun goToCommunitySearch(context: Context) {
              // custom implementation for navigating to Community Search
          }
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehavior = CustomSocialHomePageBehavior()
          AmityUIKit4Manager.behavior.socialHomePageBehavior = customBehavior
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitProvider, AmitySocialHomePage } from '@amityco/ui-kit';

      const SampleSocialHomePage = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
            pageBehavior={{
              AmitySocialHomePageBehavior: {
                goToGlobalSearch: () => {
                  // Navigate to global search page
                },
                goToCommunitySearch: () => {
                  // Navigate to community search page
                },
              },
            }}
          >
            <AmitySocialHomePage />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import { AmitySocialHomePage, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
        behaviour={{
          AmitySocialHomePageBehavior: {
            goToGlobalSearch: () => {
              // Navigate to global search page
            },
            goToCommunitySearch: () => {
              // Navigate to community search page
            },
          },
        }}
      >
        <AmitySocialHomePage />
      </AmityUiKitProvider>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Feed Components">
    **Newsfeed and content display**

    Components for displaying and managing social content feeds with stories and posts.

    ### Newsfeed Component

    Integrates story display and global feed for a complete social feed experience.

    | Feature            | Description                                                                     |
    | ------------------ | ------------------------------------------------------------------------------- |
    | Story Display      | Highlights user stories at the top, making them immediately accessible          |
    | Post List          | Displays recent posts, updates, and activities from connections and communities |
    | Engagement Options | Users can like, comment, and interact with posts directly                       |

    <CodeGroup>
      ```swift iOS theme={null}
      let newsfeedComponent = AmityNewsFeedComponent()
      let viewController = AmitySwiftUIHostingController(rootView: newsfeedComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeNewsFeedComponent() {
          AmityNewsFeedComponent()
      }
      ```

      ```dart Flutter theme={null}
      Widget newsFeedComponent() {
        return AmityNewsFeedComponent();
      }
      ```
    </CodeGroup>

    ### Global Feed Component

    Central component for aggregating and displaying diverse community posts.

    <CodeGroup>
      ```swift iOS theme={null}
      let globalFeedComponent = AmityGlobalFeedComponent()
      let viewController = AmitySwiftUIHostingController(rootView: globalFeedComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeGlobalFeedComponent() {
          AmityGlobalFeedComponent()
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitProvider, AmityGlobalFeedComponent } from '@amityco/ui-kit';

      const SampleGlobalFeed = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
            pageBehavior={{
              AmityGlobalFeedComponentBehavior: {
                goToPostDetailPage: ({ postId }) => {
                  console.log('goToPostDetailPage', postId);
                },
                goToViewStoryPage: () => {},
              },
            }}
          >
            <AmityGlobalFeedComponent
              isLoading={false}
              items={[]}
              onFeedReachBottom={() => {}}
              onPostDeleted={() => {}}
            />
          </AmityUIKitProvider>
        );
      };
      ```

      ```dart Flutter theme={null}
      Widget globalFeedComponent() {
        return AmityGlobalFeedComponent();
      }
      ```
    </CodeGroup>

    ### Empty Newsfeed Component

    Handles empty states with engaging placeholders and call-to-action buttons.

    <CodeGroup>
      ```swift iOS theme={null}
      let emptyNewsFeedComponent = AmityEmptyNewsFeedComponent()
      let viewController = AmitySwiftUIHostingController(rootView: emptyNewsFeedComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeEmptyNewsFeedComponent() {
          AmityEmptyNewsFeedComponent()
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitProvider, AmityEmptyNewsFeedComponent } from '@amityco/ui-kit';

      const SampleEmptyNewsFeed = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
          >
            <AmityEmptyNewsFeedComponent />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import { AmityEmptyNewsFeedComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
      >
        <AmityEmptyNewsFeedComponent />
      </AmityUiKitProvider>
      ```

      ```dart Flutter theme={null}
      Widget emptyNewsfeedComponent() {
        return AmityEmptyNewsFeedComponent();
      }
      ```
    </CodeGroup>

    ### Navigation Behavior

    The behavior of the AmityGlobalFeedComponent can be customized to handle navigation to the post detail page differently.

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmityGlobalFeedComponentBehavior: AmityGlobalFeedComponentBehavior {
          override init() {
              super.init()
          }
          
          override func goToPostDetailPage(context: AmityGlobalFeedComponentBehavior.Context) {
              // Custom implementation for navigating to Post Detail Page
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setGlobalFeedComponentBehaviour() {
          let customBehavior = CustomAmityGlobalFeedComponentBehavior()
          AmityUIKit4Manager.behaviour.globalFeedComponentBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomGlobalFeedComponentBehavior : AmityGlobalFeedComponentBehavior() {
          override fun goToPostDetailPage(context: Context, id: String, category: AmityPostCategory) {
              // custom implementation for navigating to Post Detail Page
          }
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehavior = CustomGlobalFeedComponentBehavior()
          AmityUIKit4Manager.behavior.globalFeedComponentBehavior = customBehavior
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitProvider, AmityGlobalFeedComponent } from '@amityco/ui-kit';

      const SampleGlobalFeed = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
            pageBehavior={{
              AmityGlobalFeedComponentBehavior: {
                goToPostDetailPage: ({ postId }) => {
                  console.log('goToPostDetailPage', postId);
                },
                goToViewStoryPage: () => {},
              },
            }}
          >
            <AmityGlobalFeedComponent
              isLoading={false}
              items={[]}
              onFeedReachBottom={() => {}}
              onPostDeleted={() => {}}
            />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import { AmityGlobalFeedComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
        behaviour={{
          AmityGlobalFeedComponentBehavior: {
            goToPostDetailPage: (postId: string) => {
              console.log(postId);
            },
          },
        }}
      >
        <AmityGlobalFeedComponent />
      </AmityUiKitProvider>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Content Creation">
    **Post and story creation tools**

    Components for enabling users to create posts, stories, and other content types.

    ### Create Post Menu Component

    Provides users with options to create various types of content.

    ### Features

    | Feature           | Description                                                       |
    | ----------------- | ----------------------------------------------------------------- |
    | Create Post       | Navigate to post creation with target selection                   |
    | Create Story      | Direct users to story target selection for audience customization |
    | Create Poll       | Enable poll creation functionality                                |
    | Create Livestream | Support for livestream content creation                           |

    ### Customization Options

    | Config ID                                                    | Type      | Description               |
    | ------------------------------------------------------------ | --------- | ------------------------- |
    | `social_home_page/create_post_menu/*`                        | Component | Customize component theme |
    | `social_home_page/create_post_menu/create_post_button`       | Element   | Customize text and image  |
    | `social_home_page/create_post_menu/create_story_button`      | Element   | Customize text and image  |
    | `social_home_page/create_post_menu/create_poll_button`       | Element   | Customize text and image  |
    | `social_home_page/create_post_menu/create_livestream_button` | Element   | Customize text and image  |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let createPostMenuComponent = AmityCreatePostMenuComponent()
      let viewController = AmitySwiftUIHostingController(rootView: createPostMenuComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCreatePostMenuComponent() {
          AmityCreatePostMenuComponent()
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitProvider, AmityCreatePostMenuComponent } from '@amityco/ui-kit';

      const SampleCreatePostMenu = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
            pageBehavior={{
              AmityCreatePostMenuComponentBehavior: {
                goToSelectPostTargetPage: () => {},
                goToStoryTargetSelectionPage: () => {},
              },
            }}
          >
            <AmityCreatePostMenuComponent />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import { AmityCreatePostMenuComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
        behaviour={{
          AmityCreatePostMenuComponentBehavior: {
            goToSelectStoryTargetPage: () => {},
            goToSelectPostTargetPage: ({ postType }) => console.log(postType),
          },
        }}
      >
        <AmityCreatePostMenuComponent />
      </AmityUiKitProvider>
      ```
    </CodeGroup>

    <Note>
      **Navigation Behavior**: The component behavior can be customized to manage navigation flow for post and story creation aligned with your application's user experience.
    </Note>

    ### Navigation Behavior

    The behavior of the AmityCreatePostMenuComponent can be customized to manage how the application navigates upon user actions related to post and story creation.

    <CodeGroup>
      ```swift iOS theme={null}
      class CustomAmityCreatePostMenuComponentBehavior: AmityCreatePostMenuComponentBehavior {
          override init() {
              super.init()
          }
          
          override func goToSelectPostTargetPage(context: AmityCreatePostMenuComponentBehavior.Context) {
              // Custom implementation for navigating to Select Post Target Page
          }
          
          override func goToSelectStoryTargetPage(context: AmityCreatePostMenuComponentBehavior.Context) {
              // Custom implementation for navigating to Select Story Target Page
          }
      }

      // Call this function to setup custom behaviour class in UIKit
      func setCreatePostMenuComponentBehaviour() {
          let customBehavior = CustomAmityCreatePostMenuComponentBehavior()
          AmityUIKit4Manager.behaviour.createPostMenuComponentBehavior = customBehavior
      }
      ```

      ```kotlin Android theme={null}
      class CustomCreatePostMenuComponentBehavior : AmityCreatePostMenuComponentBehavior() {
          override fun goToSelectPostTargetPage(
              context: Context,
              type: AmityPostTargetSelectionPageType
          ) {
              // custom implementation for navigating to Post Target Selection Page
          }

          override fun goToSelectStoryTargetPage(context: Context) {
              // custom implementation for navigating to Story Target Selection Page
          }
      }

      // Call this function in AmityUIKit4Manager class to setup custom behaviour class in UIKit
      fun setCustomBehavior() {
          val customBehaviour = CustomCreatePostMenuComponentBehavior()
          AmityUIKit4Manager.behavior.createPostMenuComponentBehavior = customBehaviour
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitProvider, AmityCreatePostMenuComponent } from '@amityco/ui-kit';

      const SampleCreatePostMenu = () => {
        return (
          <AmityUIKitProvider
            apiKey="API_KEY"
            apiRegion="API_REGION"
            userId="userId"
            displayName="displayName"
            configs={config}
            pageBehavior={{
              AmityCreatePostMenuComponentBehavior: {
                goToSelectPostTargetPage: () => {
                  // Navigate to post target selection
                },
                goToStoryTargetSelectionPage: () => {
                  // Navigate to story target selection
                },
              },
            }}
          >
            <AmityCreatePostMenuComponent />
          </AmityUIKitProvider>
        );
      };
      ```

      ```jsx React Native theme={null}
      import { AmityCreatePostMenuComponent, AmityUiKitProvider } from 'amity-react-native-social-ui-kit';

      <AmityUiKitProvider
        configs={config}
        apiKey="API_KEY"
        apiRegion="API_REGION"
        userId="userId"
        displayName="displayName"
        apiEndpoint="https://api.{API_REGION}.amity.co"
        behaviour={{
          AmityCreatePostMenuComponentBehavior: {
            goToSelectStoryTargetPage: () => {
              // Navigate to story target selection
            },
            goToSelectPostTargetPage: ({ postType }) => {
              console.log(postType);
              // Navigate to post target selection
            },
          },
        }}
      >
        <AmityCreatePostMenuComponent />
      </AmityUiKitProvider>
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Community Discovery">
    **Explore and discover communities**

    Components for helping users find and engage with communities through categories and recommendations.

    ### Community Categories Component

    Displays five categories in a horizontally scrollable view with explore options.

    | Feature      | Description                                                |
    | ------------ | ---------------------------------------------------------- |
    | Categories   | Highlights 5 categories making them immediately accessible |
    | See More Tab | Allows users to view all categories in a separate page     |

    <CodeGroup>
      ```swift iOS theme={null}
      let categoriesComponent = AmityCommunityCategoriesComponent()
      let viewController = AmitySwiftUIHostingController(rootView: categoriesComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeCommunityCategoriesComponent() {
          AmityCommunityCategoriesComponent()
      }
      ```
    </CodeGroup>

    ### Recommended Communities Component

    Shows top four recommended communities for users to join.

    <CodeGroup>
      ```swift iOS theme={null}
      let recommendedComponent = AmityRecommendedCommunitiesComponent()
      let viewController = AmitySwiftUIHostingController(rootView: recommendedComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeRecommendedCommunitiesComponent() {
          AmityRecommendedCommunitiesComponent()
      }
      ```
    </CodeGroup>

    ### Trending Communities Component

    Showcases the top five trending communities for user interaction.

    <CodeGroup>
      ```swift iOS theme={null}
      let trendingComponent = AmityTrendingCommunitiesComponent()
      let viewController = AmitySwiftUIHostingController(rootView: trendingComponent)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeTrendingCommunitiesComponent() {
          AmityTrendingCommunitiesComponent()
      }
      ```
    </CodeGroup>

    ### Customization Options

    | Component   | Config ID                                    | Type      | Description               |
    | ----------- | -------------------------------------------- | --------- | ------------------------- |
    | Categories  | `social_home_page/community_categories/*`    | Component | Customize component theme |
    | Recommended | `social_home_page/recommended_communities/*` | Component | Customize component theme |
    | Trending    | `social_home_page/trending_communities/*`    | Component | Customize component theme |
  </Tab>
</Tabs>

## For You Feed

For You is a backend-personalized feed that appears as a tab on the social home page. It is a **network-level setting** — the tab only shows when the network has For You feed enabled and the current user is not a visitor or bot. When the setting is off (or the feed reports that it is disabled), the UIKit hides the tab and falls back to the newsfeed automatically.

<Info>
  **Platform Support**: For You feed is available on the **React Web, iOS, and Android** UIKit. It is not available on Flutter or React Native.
</Info>

### How the tab is gated

The social home page reads the network setting and the feed collection, then derives whether to show the For You tab:

1. `useForYouFeedSetting()` reads `forYouFeed.enabled` for the network (skipped for visitors/bots).
2. `useForYouFeedCollection()` observes the personalized posts once the setting is enabled.
3. The tab is shown only when the setting is enabled **and** the collection did not fail with a feed-disabled error. If the feed becomes unavailable while the tab is active, the page switches back to the newsfeed.

### Rendering the feed

`AmitySocialHomePage` wires the For You tab for you — enable For You feed on your network and it appears automatically. To embed the feed on its own, render the `ForYouFeed` component with a `pageId`:

<CodeGroup>
  ```tsx React theme={null}
  import { ForYouFeed } from '@amityco/ui-kit';

  function ForYouTab() {
    return <ForYouFeed pageId="social_home_page" />;
  }
  ```

  ```swift iOS theme={null}
  AmityForYouFeedComponent()
  ```

  ```kotlin Android theme={null}
  @Composable
  fun composeForYouFeedComponent() {
      AmityForYouFeedComponent()
  }
  ```
</CodeGroup>

### Hooks

| Hook                                      | Returns                                                                       | Use for                                                                                      |
| ----------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `useForYouFeedSetting({ shouldCall })`    | `{ forYouFeedSetting, isPending, error }`                                     | Decide whether to render a For You entry point. Pass `shouldCall: !isVisitorOrBot`.          |
| `useForYouFeedCollection({ shouldCall })` | `{ posts, isLoading, hasMore, loadMore, error, refresh, isLoadingFirstPage }` | Render the personalized post list and paginate it. Gate `shouldCall` on the enabled setting. |

<Note>
  Both hooks and the `ForYouFeed` component are backed by the SDK's `FeedRepository.getForYouFeed()` and `Client.getForYouFeedSetting()`. See [Feeds & Timelines](/social-plus-sdk/social/discovery-engagement/feed/overview) for the SDK-level behavior.
</Note>

## Component Management Strategies

<AccordionGroup>
  <Accordion title="Social Home Architecture" icon="home">
    **Designing comprehensive social experiences**

    Plan your social home page layout by combining feed components, content creation tools, and community discovery elements. Consider user flow between different sections and how users will navigate from content consumption to creation and community engagement.
  </Accordion>

  <Accordion title="Content Flow Optimization" icon="flow">
    **Balancing consumption and creation**

    Design the balance between content display (feeds, stories) and content creation opportunities. Position creation menus strategically to encourage user-generated content while maintaining focus on content discovery and consumption.
  </Accordion>

  <Accordion title="Community Engagement Strategy" icon="users">
    **Driving community participation**

    Use community discovery components strategically to introduce users to relevant communities. Combine categories, recommendations, and trending displays to provide multiple pathways for community exploration and joining.
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="User Experience Design" icon="user-check">
    **Creating intuitive social interfaces**

    Design clear visual hierarchy between different content types, provide smooth transitions between components, and ensure navigation patterns are consistent across all social features. Consider mobile-first design for optimal user engagement.
  </Accordion>

  <Accordion title="Performance Optimization" icon="gauge">
    **Ensuring smooth social experiences**

    Implement efficient loading strategies for feeds, optimize image and media display, and use appropriate pagination for community discovery. The underlying SDK handles data optimization, so focus on UI responsiveness and user interaction patterns.
  </Accordion>

  <Accordion title="Customization Strategy" icon="palette">
    **Aligning with your brand identity**

    Customize themes, colors, and component behaviors to match your application's design system. Consider different user contexts (content creation vs consumption) and adjust styling to guide user attention appropriately.
  </Accordion>
</AccordionGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Content Discovery" href="/uikit/components/social/content-discovery" icon="magnifying-glass">
    **Search & Discovery**
    Global search, categories, and notification components
  </Card>

  <Card title="Post Components" href="/uikit/components/social/posts" icon="file">
    **Content Creation**
    Post creation and management components
  </Card>

  <Card title="Community Management" href="/uikit/components/social/communities" icon="users">
    **Community Features**
    Community creation and administration tools
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Start with AmitySocialHomePage for a complete experience, then customize individual components (newsfeed, create post menu, community discovery) based on your specific user engagement goals and brand requirements.
</Tip>