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

# Components Overview

> Own your components with Sublay's CLI-based distribution system

# Sublay Components

Sublay provides a **CLI-based component distribution** system inspired by shadcn/ui. Instead of hiding UI components in `node_modules`, Sublay copies the full source code directly into your project so you own and control every line.

<Info>
  **The philosophy:** Copy, paste, customize. Not install and configure.

  You get **source code**, not packages. You **own** your components and can modify anything.
</Info>

***

## How It Works

<Steps>
  <Step title="Initialize Sublay">
    ```bash theme={null}
    npx @sublay/cli init
    ```

    Configure your platform (React/React Native/Expo), styling preference (Tailwind/Inline styles), and component installation path.
  </Step>

  <Step title="Add Components">
    ```bash theme={null}
    npx @sublay/cli add comments-threaded --ref v8
    # or
    npx @sublay/cli add comments-social --ref v8
    ```

    Components are copied directly into your `src/components/` directory as editable source files. `--ref v8` reads the component from the `v8` branch of the registry, where the v8 components live.
  </Step>

  <Step title="Use & Customize">
    ```tsx theme={null}
    import { ThreadedCommentSection } from './components/comments-threaded';

    <ThreadedCommentSection foreignId="my-post-123" createIfNotFound />
    ```

    The component works out of the box. Want to customize? Edit the source files directly.
  </Step>
</Steps>

***

## Available Components

<CardGroup cols={3}>
  <Card title="Threaded Comments" icon="comments" href="/v8/components/components/threaded/overview">
    Reddit-style threaded discussions with:

    * Unlimited nesting depth
    * Upvote/downvote system
    * Visual threading lines
    * Collapsible threads

    **Best for:** Forums, technical discussions, detailed conversations
  </Card>

  <Card title="Social Comments" icon="heart" href="/v8/components/components/social/overview">
    Instagram-style social comments with:

    * Single-level nesting
    * Heart/like system
    * Clean, minimal design
    * Top/New/Old sorting

    **Best for:** Social platforms, media content, quick interactions
  </Card>

  <Card title="Notification Control" icon="bell" href="/v8/components/components/notifications/overview">
    Dropdown notification bell control with:

    * Real-time notification updates
    * Smart viewport positioning
    * Mark as read functionality
    * Infinite scroll

    **Best for:** Navigation bars, headers, notification systems
  </Card>
</CardGroup>

***

## Styling Options

Each component comes in two styling variants:

### Inline Styles

* All styles as `style={{}}` objects in JSX
* No external dependencies
* Works everywhere
* Easy to find and change colors
* Theme support via conditional logic

### Tailwind CSS

* Utility classes for styling
* Requires Tailwind CSS 3.3 or later installed (on React Native and Expo, NativeWind 4)
* Dark mode via `dark:` prefix
* More concise code
* Easy to integrate with design systems

Choose your variant during `init` — you can switch by re-running `add` commands.

***

## What Gets Installed

When you add a comment component, about **40 TypeScript/TSX files** are copied into your project (40 for threaded comments; 42 for social comments, or 43 for the inline styles variant of social comments on React Native and Expo):

```
src/components/comments-threaded/
├── index.ts                    # Entry point
├── components/                 # All UI components (22 files)
│   ├── threaded-comment-section.tsx
│   ├── new-comment-form.tsx
│   ├── comments-feed/
│   └── modals/
├── hooks/                      # React hooks
├── utils/                      # Utilities
├── context/                    # React context
└── shared/                     # Shared pieces: GIF picker, avatar, skeletons, icons (12 files)
```

Every file is:

* ✅ Visible in your project
* ✅ Editable
* ✅ TypeScript with full type annotations
* ✅ Self-documenting with inline comments

***

## Required Dependencies

Components depend on Sublay's core libraries for data fetching, real-time updates, authentication, and more. The files in a component's `shared/` folder add a few third-party packages.

**For React (Web):**

| Package | Used for |
| - | - |
| `@sublay/react-js` `^8.0.0-beta.0` | Data, authentication, real-time updates |
| `@giphy/js-fetch-api` `^5.7.0`, `@giphy/react-components` `^10.1.1` | The GIF picker |

**For React Native / Expo:**

| Package | Used for |
| - | - |
| `@sublay/react-native` `^8.0.0-beta.0` (`@sublay/expo` on Expo) | Data, authentication, real-time updates |
| `@gorhom/bottom-sheet` `^5.0.0`, `react-native-reanimated` `^3.16.0` | The comment menu and report sheets |
| `react-native-gesture-handler` `^2.31.1` | The sheets and the GIF picker |
| `react-native-svg` `^15` | Icons and the generated avatar for users without one |
| `nativewind` `^4.0.0` | Tailwind variant only |

The CLI checks for these and offers to install them automatically.

***

## Getting Started

<CardGroup cols={2}>
  <Card title="CLI Setup" icon="terminal" href="/v8/components/installation/cli-setup">
    Install the CLI and configure your project
  </Card>

  <Card title="Quick Start" icon="bolt" href="/v8/components/installation/quick-start">
    Get comments working in under 5 minutes
  </Card>

  <Card title="Customization" icon="paintbrush" href="/v8/components/customization/overview">
    Learn how to customize colors, layout, and functionality
  </Card>

  <Card title="Component Types" icon="layer-group" href="/v8/components/components/overview">
    Compare available components and choose the right one
  </Card>
</CardGroup>

***

## Philosophy

The Sublay CLI follows these principles:

1. **Minimal Props** — Components work with a single prop that identifies the entity. No complex configuration required.
2. **Sensible Defaults** — Beautiful, accessible styling out of the box.
3. **Edit, Don't Configure** — Customize by editing source code, not passing config objects.
4. **Progressive Disclosure** — Ignore implementation details until you need to customize.
5. **Self-Documenting Code** — Clear file names, thorough comments, and color palettes documented in headers.

***

## Open Source

All components are **open source** under the Apache 2.0 license. You can fork, modify, contribute, and use them in commercial projects freely.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.