> ## 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.

# Overview

> Threaded comment sections using CommentSectionProvider and useCommentSection

Comments in Sublay are threaded discussions attached to entities. They support replies (nested or flat), reactions, GIF attachments, user mentions, space mentions, sorting, and pagination.

<Note>
  **Requires the `comments` bundle.** Comments are only available when the `comments` bundle is installed on your project. See [Bundles](/v8/bundles) to add it.
</Note>

<Tip>
  **Don't want to build your own comment UI from scratch?** Sublay ships ready-made comment components — fully featured, themeable, and installed directly into your codebase via the CLI as editable source code. Skip straight to the [Components section](/v8/components/overview) to get up and running in minutes.
</Tip>

## The Provider Pattern

The comment system uses a `CommentSectionProvider` + `useCommentSection` pair. Wrap your comment UI with `CommentSectionProvider` to load comments for an entity, then access all comment state and actions from any descendant with `useCommentSection`.

```tsx theme={null}
import { CommentSectionProvider } from "@sublay/react-js";

function ArticlePage({ articleId }: { articleId: string }) {
  return (
    <CommentSectionProvider foreignId={articleId} createIfNotFound>
      <CommentList />
      <CommentInput />
    </CommentSectionProvider>
  );
}
```

## What the Provider Manages

* **Loading comments** — fetches the first page of top-level comments on mount and provides `loadMore` / `hasMore` for the next ones (cursor-paginated, so new comments never shift what you get)
* **Nested replies** — optionally brings a few levels of replies with every page (`replyDepth`, `replyLimit`); [`useReplies`](/v8/hooks/comments/use-replies) loads more for any comment, continuing from what's already loaded
* **One copy of each comment** — every loaded comment is kept once, so an edit or delete shows up everywhere it's rendered; read any loaded comment with `getComment(id)`
* **New comments** — tracks freshly submitted comments separately from fetched ones, so they don't jump around
* **Highlighted comment** — fetches and shows a specific comment (e.g., from a deep link)
* **Reply state** — tracks which comment is being replied to and shows/hides the reply banner
* **CRUD actions** — `createComment`, `updateComment`, `deleteComment` with optimistic updates
* **Sort** — `sortBy`/`setSortBy` for switching between `"createdAt"`, `"top"` (raw count of `sortByReaction`, default upvotes) and `"controversial"`, plus `sortDir`/`setSortDir` (`"asc"`/`"desc"`), which applies to every sort
* **Errors** — a failed load lands in `error`; `loadMore` never throws

## In This Section

<CardGroup cols={2}>
  <Card title="Comment Section" href="/v8/sdk/comments/comment-section">
    Full guide to CommentSectionProvider props and the useCommentSection hook values.
  </Card>
</CardGroup>

## Pre-Built Comment Components

If you'd rather not wire up your own comment UI, Sublay provides two production-ready comment components installed via the CLI directly into your project as editable source code.

<CardGroup cols={2}>
  <Card title="Threaded Comments" href="/v8/components/components/threaded/overview">
    A classic threaded comment section with nested replies, reactions, and sorting. Ideal for blogs, docs, and long-form content.
  </Card>

  <Card title="Social Comments" href="/v8/components/components/social/overview">
    A flat social-style comment feed with inline replies and a familiar social media feel. Great for feeds and short-form content.
  </Card>
</CardGroup>

Both components are built on top of `CommentSectionProvider` and `useCommentSection` — the same primitives documented here — so you can customize them as deeply as needed after installation.

## Comment Data Model

See the [Comment data model](/v8/data-models/comment) for the full field reference.


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