> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.

# UIKit Components

> 50+ pre-built components to build social apps 10x faster. Copy-paste ready code examples.

social.plus UIKit ships production‑ready building blocks covering social feeds, communities, chat, realtime engagement, moderation, and media workflows. This page orients you to the component families, helps you choose the right starting layer, and links to deeper implementation docs.

<Tip>
  If you are still validating product fit, start with out‑of‑the‑box components first. Defer heavy styling or forking until core UX assumptions are proven.
</Tip>

## When to Use Pre‑built Components

Use UIKit components when you need to:

<Checklist>
  <li>Ship core social & chat functionality in days not months</li>
  <li>Reduce maintenance of real‑time, media, and moderation edge cases</li>
  <li>Inherit accessibility, performance & localization defaults</li>
  <li>Progressively customize (themes → styling → dynamic UI → fork)</li>
  <li>Keep API surface stable while iterating on product UX</li>
</Checklist>

Consider building custom (or moving to <a href="/uikit/customization/advanced-customization">Fork & Extend</a>) when you:

* Need radical UX divergence not achievable via theming/styling/dynamic config
* Must embed experimental interaction paradigms (novel canvas, 3D, AR)
* Have compliance constraints requiring full source review & diff control

## Quick Navigation

<CardGroup cols={3}>
  <Card title="Social Overview" icon="sparkles" href="/uikit/components/social/overview">Posts, feeds (incl. For You), stories, clips, livestream</Card>
  <Card title="Chat Overview" icon="comments" href="/uikit/components/chat/overview">Conversation, group & live chat</Card>
  <Card title="Communities" icon="building" href="/uikit/components/social/communities">Community spaces</Card>
  <Card title="Moderation" icon="shield" href="/uikit/components/social/moderation">Safety & reporting</Card>
  <Card title="Content Discovery" icon="compass" href="/uikit/components/social/content-discovery">Search & trending</Card>
  <Card title="Users" icon="user" href="/uikit/components/social/users">Profiles & presence</Card>
</CardGroup>

### Media & Ephemeral

<CardGroup cols={3}>
  <Card title="Story" icon="camera" href="/uikit/components/social/story">24h ephemeral content</Card>
  <Card title="Clip" icon="video" href="/uikit/components/social/clip">Short‑form vertical video</Card>
  <Card title="Livestream" icon="tower-broadcast" href="/uikit/components/social/livestream">Real‑time broadcasting</Card>
</CardGroup>

### Chat Components

<CardGroup cols={3}>
  <Card title="Recent Chats" icon="list" href="/uikit/components/chat/recent-chats">Channel list</Card>
  <Card title="Conversation Chat" icon="comments" href="/uikit/components/chat/conversation-chat">1:1 messaging</Card>
  <Card title="Group Chat" icon="users" href="/uikit/components/chat/group-chat">Group conversations & management</Card>
  <Card title="Live Chat" icon="broadcast-tower" href="/uikit/components/chat/live-chat">Event / stream chat</Card>
  <Card title="Search Chat" icon="magnifying-glass" href="/uikit/components/chat/search-chat">Search channels & messages</Card>
</CardGroup>

<Info>
  For advanced dynamic layout adaptation, combine components with <a href="/uikit/customization/dynamic-ui">Dynamic UI</a> to conditionally show/hide or rearrange modules without forking.
</Info>

## Customization Path (Decision Snapshot)

| Goal                                 | Start Here                                               | Escalate To       | When to Escalate                                  |
| ------------------------------------ | -------------------------------------------------------- | ----------------- | ------------------------------------------------- |
| Brand colors & typography            | <a href="/uikit/customization/overview">Cutomization</a> | Component Styling | Need granular token overrides beyond palette      |
| Adjust spacing / hide elements       | Component Styling                                        | Dynamic UI        | Multiple layouts per context (role, A/B test)     |
| Conditional layouts & feature gating | Dynamic UI                                               | Fork & Extend     | Need structural changes not expressible in config |
| Experimental UX / deep logic changes | Fork & Extend                                            | —                 | Full control & long‑term ownership required       |

## Troubleshooting

<AccordionGroup>
  <Accordion title="Component Does Not Render">
    Confirm authentication & client initialization completed; check feature flag / dynamic UI rules not excluding component; inspect console / logs for API permission errors.
  </Accordion>

  <Accordion title="Style Override Not Applying">
    Verify selector specificity (see Component Styling precedence); ensure dynamic theme not overwriting at runtime; clear build / metro cache.
  </Accordion>

  <Accordion title="Realtime Updates Missing">
    Check network / WebSocket connectivity; verify subscription scope; ensure app not in background restricted mode; inspect rate limiting headers.
  </Accordion>

  <Accordion title="Media Upload Slow or Fails">
    Check file size limits & compression settings; fall back to resumable upload APIs; ensure correct MIME type negotiation.
  </Accordion>

  <Accordion title="Decision: Style vs Fork?">
    If change is purely visual (layout minor, spacing, colors) stay in styling; structural render tree changes or new data flows → evaluate fork per advanced customization matrix.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={3}>
  <Card title="Social Components" icon="sparkles" href="/uikit/components/social/overview">Deep dive into social content</Card>
  <Card title="Chat Components" icon="comments" href="/uikit/components/chat/overview">Messaging & live chat details</Card>
  <Card title="UIKit Customization" icon="palette" href="/uikit/customization/overview">Foundational tokens</Card>
  <Card title="Component Styling" icon="paintbrush" href="/uikit/customization/component-styling">Targeted overrides</Card>
  <Card title="Dynamic UI" icon="layout" href="/uikit/customization/dynamic-ui">Conditional layouts</Card>
  <Card title="Fork & Extend" icon="code-branch" href="/uikit/customization/advanced-customization">Advanced customization</Card>
</CardGroup>

<Info>
  Keep feedback flowing: note gaps or advanced scenarios and feed them back before committing to a fork—often a lighter abstraction exists.
</Info>