Skip to main content

Release Notes

3 min readStableIntermediate

ReleaseNote renders one release as a card: a version badge, a date, a heading, and a body where ReleaseHighlight badges label each change. Each example below shows the live card first, then the exact MDX that produced it.

Quick Start

Only date and title are required, so the smallest note is a card with one highlight in the body.

March 26, 2026

Mobile navigation

New The table of contents now collapses on phone screens.

app/features/components/release-notes.mdx
MDX
<ReleaseNote date="March 26, 2026" title="Mobile navigation">
 
<ReleaseHighlight type="new" /> The table of contents now collapses on phone
screens.
 
</ReleaseNote>

Adding Options

Pass version to put a badge ahead of the date, then give each change in the body its own highlight type.

2.1.0March 26, 2026

Faster search

New The table of contents collapses on phone screens.

Improved Search results update as you type.

Fix Code blocks no longer flash on refresh.

app/features/components/release-notes.mdx
MDX
<ReleaseNote version="2.1.0" date="March 26, 2026" title="Faster search">
 
<ReleaseHighlight type="new" /> The table of contents collapses on phone
screens.
 
<ReleaseHighlight type="improved" /> Search results update as you type.
 
<ReleaseHighlight type="fix" /> Code blocks no longer flash on refresh.
 
</ReleaseNote>

Advanced

List notes newest first to build a release history; these two cards use all eight highlight types, and the last badge passes its own text in place of the built-in label.

2.0.0March 15, 2026

Theme system

New Twenty-six color themes, picked by environment variable.

Improved Dark mode follows the system setting on first visit.

Fix The theme toggle keeps its state across a refresh.

Performance Index generation runs in a single pass.

1.9.0February 28, 2026

Cleanup release

Breaking Change The minimum Node.js version moves to 24.0.0.

Deprecated The old config API still works, but warns on every call.

Removed Legacy CSS color variables are gone.

Sessions Session validation now rejects expired tokens early.

app/features/components/release-notes.mdx
MDX
<ReleaseNote version="2.0.0" date="March 15, 2026" title="Theme system">
 
<ReleaseHighlight type="new" /> Twenty-six color themes, picked by environment
variable.
 
<ReleaseHighlight type="improved" /> Dark mode follows the system setting on
first visit.
 
<ReleaseHighlight type="fix" /> The theme toggle keeps its state across a
refresh.
 
<ReleaseHighlight type="performance" /> Index generation runs in a single pass.
 
</ReleaseNote>
 
<ReleaseNote version="1.9.0" date="February 28, 2026" title="Cleanup release">
 
<ReleaseHighlight type="breaking" /> The minimum Node.js version moves to
24.0.0.
 
<ReleaseHighlight type="deprecated" /> The old config API still works, but warns
on every call.
 
<ReleaseHighlight type="removed" /> Legacy CSS color variables are gone.
 
<ReleaseHighlight type="security">Sessions</ReleaseHighlight> Session validation
now rejects expired tokens early.
 
</ReleaseNote>

Options

ReleaseNote

versionstring

Version label shown as a brand-colored badge in the card header. Leave it out and the header starts with the date.

datestringrequired

Release date, printed next to the version badge exactly as written. Pick one format and keep it the same across your notes.

titlestringrequired

One-line summary of the release, rendered as the card heading.

childrenReactNoderequired

Card body: the highlight badges and the text that follows each one. Blocks are spaced apart automatically, so put each change in its own paragraph.

ReleaseHighlight

typestringrequired

Which badge to render: new, improved, fix, deprecated, breaking, security, removed, or performance. The type sets the badge color, icon, and default label. A type outside that list falls back to the new badge rather than failing the build, so a typo is easy to miss — check the color.

childrenReactNode

Badge text, replacing the type's built-in label. Self-close the tag to keep the label. The badge is an inline element, so whatever you write after it flows on the same line as the badge.

Highlight types

Each type carries its own label, icon, and color:

  • new: labeled New, sparkles icon, green.
  • improved: labeled Improved, trending-up icon, blue.
  • fix: labeled Fix, check-circle icon, teal.
  • deprecated: labeled Deprecated, warning-triangle icon, amber.
  • breaking: labeled Breaking Change, alert-octagon icon, red.
  • security: labeled Security, shield icon, purple.
  • removed: labeled Removed, trash icon, red.
  • performance: labeled Performance, gauge icon, sky blue.

Related pages

Changelog

Badge

Was this page helpful?