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

Embed a notification experience into your product, enabling collaboration
between your users. Liveblocks Notifications is fully customizable, allowing you
to create a range of notification experiences that look and feel like your
product. Easily send notifications, create inbox notification trays, and trigger
emails with aggregated notifications. Any custom notification can be sent, but
other parts of Liveblocks, such as
[Comments](/docs/ready-made-features/comments) and
[text editors](/docs/ready-made-features/multiplayer-editing/text-editor), can
also automatically trigger collaboration notifications where appropriate.

## Overview

<ListGrid columns={2}>
  <DocsCard
    type="technology"
    title="Concepts"
    href="/docs/collaboration-features/notifications/concepts"
    description="Learn about inbox notifications"
    visual={<DocsIdeaIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Default components"
    href="/docs/collaboration-features/notifications/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/notifications/hooks"
    description="Retrieve notifications & set settings"
    visual={<DocsHooksIcon className="fill-product-icon-brand h-auto w-6" />}
  />
  <DocsCard
    type="technology"
    title="Styling and customization"
    href="/docs/collaboration-features/notifications/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/notifications/email-notifications"
    description="Send notifications with webhooks"
    visual={<DocsEmailIcon className="fill-product-icon-brand h-auto w-6" />}
  />
</ListGrid>

## Notifications API Reference

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

## Examples using Notifications

<ListGrid columns={2}>
  <ExampleCard
    example={{
      title: "Comments notifications",
      slug: "comments-notifications",
      image: "/images/examples/thumbnails/comments-notifications.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Custom notifications",
      slug: "notifications-custom",
      image: "/images/examples/thumbnails/custom-notifications.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Comments emails",
      slug: "comments-emails",
      image: "/images/examples/thumbnails/comments-email.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
  <ExampleCard
    example={{
      title: "Text editor emails",
      slug: "collaborative-text-editor-emails",
      image: "/images/examples/thumbnails/text-editor-email.png",
    }}
    technologies={["nextjs"]}
    openInNewWindow
  />
</ListGrid>

---

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