---
meta:
  title: "Comments"
  parentTitle: "Collaboration features"
  description:
    "Embed a customizable commenting experience into your product to enable
    people to collaborate."
---

Embed a customizable commenting experience into your product, enabling
collaboration between your users. Liveblocks Comments is fully customizable,
allowing you to create a range of commenting experiences that look and feel like
your product. It enables you to build mentions, thread resolution, text
annotations, video annotations, and more.

## Overview

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Concepts"
    href="/docs/collaboration-features/comments/concepts"
    description="Learn about threads and comments"
    visual={<DocsIdeaIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Users and mentions"
    href="/docs/collaboration-features/comments/users-and-mentions"
    description="Add users to comments and mentions"
    visual={<DocsMentionIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Default components"
    href="/docs/collaboration-features/comments/default-components"
    description="Ready-to-use customizable components"
    visual={
      <DocsDefaultComponentsIcon className="fill-product-icon-brand h-auto w-6" />
    }
  />
  <DocsCard
    type="technology"
    title="Hooks"
    href="/docs/collaboration-features/comments/hooks"
    description="Get users, threads, & modify comments"
    visual={<DocsHooksIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Metadata"
    href="/docs/collaboration-features/comments/metadata"
    description="Add custom metadata to threads"
    visual={<DocsMetadataIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Primitives"
    href="/docs/collaboration-features/comments/primitives"
    description="Construct fully custom components"
    visual={
      <DocsPrimitivesIcon className="fill-product-icon-brand h-auto w-6" />
    }
  />
  <DocsCard
    type="technology"
    title="Styling and customization"
    href="/docs/collaboration-features/comments/styling-and-customization"
    description="CSS variables, dark mode, localization"
    visual={<DocsStylingIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Email notifications"
    href="/docs/collaboration-features/comments/email-notifications"
    description="Send notifications with webhooks"
    visual={<DocsEmailIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Comments API Reference

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="React"
    href="/docs/api-reference/liveblocks-react#Comments"
    description="@liveblocks/react"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="React UI"
    href="/docs/api-reference/liveblocks-react-ui#Comments"
    description="@liveblocks/react-ui"
    visual={<DocsReactIcon />}
  />
  <DocsCard
    type="technology"
    title="JavaScript"
    href="/docs/api-reference/liveblocks-client#Comments"
    description="@liveblocks/client"
    visual={<DocsJavascriptIcon />}
  />
  <DocsCard
    type="technology"
    title="Node.js"
    href="/docs/api-reference/liveblocks-node#Comments"
    description="@liveblocks/node"
    visual={<DocsNodejsIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="REST API"
    href="/docs/api-reference/rest-api-endpoints#Comments"
    description="HTTP endpoints"
    visual={<DocsApiIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Examples using Comments

<ListGrid columns={2}>
  <ExampleCard
    example={{
      title: "Comments",
      slug: "comments/nextjs-comments",
      image: "/images/examples/thumbnails/comments.jpg",
    }}
    technologies={["nextjs", "react"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Video Comments",
      slug: "video-comments/nextjs-comments-video",
      image: "/images/examples/thumbnails/comments-video.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Overlay Comments",
      slug: "overlay-comments/nextjs-comments-overlay",
      image: "/images/examples/thumbnails/comments-overlay.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Text Editor Comments",
      slug: "text-editor-comments/nextjs-comments-tiptap",
      image: "/images/examples/thumbnails/comments-text-editor.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
</ListGrid>

---

For an overview of all available documentation, see [/llms.txt](/llms.txt).