Related Topics

Guide readers to adjacent documentation with a compact, linked topic list.

Related topics

<RelatedTopics>
<RelatedTopic
  icon="book"
  name="Start building your first documentation site"
  src="/getting-started"
/>
<RelatedTopic
  icon="code"
  name="Create interactive code snippets in MDX"
  src="/mdx-components#codesnippet"
/>
<RelatedTopic
  icon="globe"
  name="Read the shadcn Hover Card documentation"
  src="https://ui.shadcn.com/docs/components/base/hover-card"
/>
</RelatedTopics>

RelatedTopics creates a compact list of useful next pages, while RelatedTopic renders each row. It is a focused alternative to repeating inline links throughout a page: readers can finish the current explanation, then choose a logical next topic from one predictable place.

When to use it

Use this component near the end of a guide, reference page, or conceptual overview to point to pages a reader is likely to need next. It is especially helpful for sibling concepts, optional deep dives, prerequisites that do not belong in the main flow, and links to external references.

Prefer three to five genuinely relevant destinations. A long list behaves like another navigation menu and makes it harder to choose a next step. Keep the label action-oriented and specific, such as Configure navigation rather than More information.

Relative src values stay in the documentation site. Full URLs are recognised as external links and open in a new tab with noreferrer. Omitting src renders a non-clickable row, which is useful for showing an unavailable or upcoming topic but should be the exception.

Custom heading and external links

Continue learning

Curate an implementation bundle

Related topics can also close an overview page: use a focused heading and three well-chosen destinations to give a reader an obvious route through the work.

Build your launch checklist

<RelatedTopics title="Build your launch checklist">
<RelatedTopic
  icon="code"
  name="Create reusable MDX components"
  src="/mdx-components"
/>
<RelatedTopic
  icon="search"
  name="Make every page easy to find"
  src="/seo-and-search/search"
/>
<RelatedTopic
  icon="arrowRight"
  name="Deploy a production-ready site"
  src="/deploying/vercel"
/>
</RelatedTopics>

Properties

titleReactNodeoptional

A RelatedTopics heading. It defaults to Related topics. Supply a short title such as Continue learning when the links represent a particular next action.

childrenRelatedTopic[]optional

The topic rows to display. Place RelatedTopic elements directly inside the list so the component can preserve its accessible list structure.

classNamestringoptional

Extra classes for the outer RelatedTopics section.

nameReactNodeoptional

A RelatedTopic label. If it is omitted, the component uses the topic's children as the label.

srcstringoptional

A RelatedTopic destination. Relative paths render as normal documentation links; absolute URLs render as external links in a new tab. Omit it to render a static, non-clickable row.

iconstringoptional

A RelatedTopic icon name. It defaults to book. Choose a name from the configured Heyo Docs icon set that matches the destination's purpose.

childrenReactNodeoptional

Fallback content for an individual RelatedTopic when name is not set.