Skip to main content

Dynamic content

Update

Changelog entry component with date, label, and version.

Usage

<Update> is the building block for changelog pages. Each entry has a date, optional category label, optional version number, and the description content. Every entry is permalinkable — the date pill links to #v{version} (or #{date} without a version), so you can share a specific release. On desktop, entries connect along a timeline rail.

<Update date="2026-04-10" label="Feature" version="1.2.0">
  Added pgvector hybrid search and the AI sparkle toggle in the search modal.
</Update>

Added pgvector hybrid search and the AI sparkle toggle in the search modal.

Label colors

The label prop drives a color-coded badge. Five common categories get smart defaults; other strings fall back to a neutral badge.

<Update date="2026-04-10" label="Feature">New feature</Update>
<Update date="2026-04-10" label="Fix">Bug fix</Update>
<Update date="2026-04-10" label="Breaking">Breaking change</Update>
<Update date="2026-04-10" label="Improvement">Performance improvement</Update>
<Update date="2026-04-10" label="Security">Security patch</Update>
<Update date="2026-04-10" label="Custom">Custom label</Update>
New feature
Bug fix
Breaking change
Performance improvement
Security patch
Custom label (falls back to default badge)

Building a changelog page

Stack updates in reverse chronological order on a /changelog page:

---
title: Changelog
description: Recent changes to NookDocs.
---

<Update date="2026-04-10" label="Feature" version="1.2.0">
  - Added pgvector hybrid search
  - New AI sparkle toggle in search modal
  - Theme tokens now apply to search results
</Update>

<Update date="2026-04-08" label="Fix" version="1.1.2">
  Fixed contentRoot filter so non-docs markdown files no longer
  pollute the search index.
</Update>

<Update date="2026-04-05" label="Breaking" version="1.1.0">
  Renamed `colors.brand` to `colors.primary` in `nookdocs.config.json`.
</Update>

Date format

Pass the date as YYYY-MM-DD. The component formats it as "April 10, 2026" using the en-US locale, parsed as UTC to avoid timezone shifts.

Description subtitle

Add a description prop to display a subtitle line below the date/label header. Useful for a one-sentence summary when the body contains a detailed list:

<Update date="2026-04-12" label="Feature" version="1.3.0" description="New search experience with AI-powered results">
  - Hybrid search combining full-text and vector similarity
  - Keyboard navigation in the search modal
  - Result previews with highlighted matches
</Update>

New search experience with AI-powered results

  • Hybrid search combining full-text and vector similarity

  • Keyboard navigation in the search modal

  • Result previews with highlighted matches

Filter tags

The tags prop renders small badges next to the entry. On changelog pages with filtering, readers can click a tag to narrow the list:

<Update date="2026-04-11" label="Fix" tags={["search", "api"]}>
  Fixed a regression where the search API returned stale results after a deploy.
</Update>

Fixed a regression where the search API returned stale results after a deploy.

Props

PropTypeRequiredDescription
datestring (ISO 8601)YesEntry date as YYYY-MM-DD
labelstringNoCategory badge — Feature, Fix, Breaking, Improvement, Security, or any custom string
versionstringNoVersion number rendered as v1.2.0
descriptionstringNoSubtitle text displayed below the header line
tagsstring[]NoFilter tags rendered as small badges
childrenReactNoderequiredEntry description — markdown, lists, code, anything
Was this page helpful?

Last updated August 7, 2026

Update | NookDocs | NookDocs