---
title: Components
description: Components that come with the CMS package.
product: CMS
type: reference
summary: Components included with the CMS package.
related:
  - /en/docs/packages/cms/overview
  - /en/docs/packages/cms/metadata
---

# Components



The CMS package comes with a set of components that are designed to work with the CMS. At any point in time, you can extend these components to add your own custom functionality.

## The `Feed` component

The `Feed` component is a wrapper around BaseHub's `Pump` component — a React Server Component that gets generated with the basehub SDK. It leverages RSC, Server Actions, and the existing BaseHub client to subscribe to changes in real time with minimal development effort.

It's also setup by default to use Next.js [Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode), allowing you to preview draft content in your app.

**It renders nothing when `BASEHUB_TOKEN` is absent.** `Pump` reads that variable out of the environment itself rather than from the client this package builds, and throws "Token not found" when it is missing — which took `/legal/terms` and `/legal/privacy`, both linked from the sign-up form, to a 500 in every project generated with `cms` and no token. The query functions in `packages/cms/index.ts` were already degrading correctly; this component was the half that was not. An unconfigured CMS has no content, so `Feed` renders none.

A page that needs to 404 rather than render empty must therefore do its own lookup outside the render prop. `Feed`'s child is a server function, so it does not run at all when the CMS is unconfigured, which puts `notFound()` out of reach and serves an unknown post as a blank 200. `apps/web/app/[locale]/blog/[slug]/page.tsx` is the worked example: it awaits `blog.getPost(slug)` itself, and it deliberately has no `loading.tsx` — a `loading.tsx` wraps the subtree in a Suspense boundary, the shell flushes and commits 200 before the lookup resolves, and `notFound()` can then only stream a body.

## The `Body` component

The `Body` component is a wrapper around BaseHub's `RichText` component — BaseHub's rich text renderer which supports passing custom handlers for native html elements and BaseHub components.

## The `TableOfContents` component

The `TableOfContents` component leverages the `Body` component to render the table of contents for the current page.

## The `Image` component

The `Image` component is a wrapper around BaseHub's `BaseHubImage` component, which comes with built-in image resizing and optimization. BaseHub recommendeds using the `BaseHubImage` component instead of the standard Next.js `Image` component as it uses `Image` under the hood, but adds a custom loader to leverage BaseHub's image pipeline.

## The `Toolbar` component

The `Toolbar` component is a wrapper around BaseHub's `Toolbar` component, which helps manage draft mode and switch branches in your site previews. It's automatically mounted on CMS pages.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

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