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>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
| Prop | Type | Required | Description |
date | string (ISO 8601) | Yes | Entry date as YYYY-MM-DD |
label | string | No | Category badge — Feature, Fix, Breaking, Improvement, Security, or any custom string |
version | string | No | Version number rendered as v1.2.0 |
description | string | No | Subtitle text displayed below the header line |
tags | string[] | No | Filter tags rendered as small badges |
children | ReactNode | required | Entry description — markdown, lists, code, anything |