Skip to main content

Changelog

2 min readStableIntermediate

ChangelogEntry draws one dated node on a vertical timeline, and ChangelogLabel tags each line inside it with a color-coded change type. Stack entries newest-first and you get a release history. For a wider, announcement-style layout, use release notes instead.

Quick Start

One entry needs a date; add version and it renders as a badge beside the date.

2026-03-241.2.0
New Accordion component
app/features/components/changelog.mdx
MDX
<ChangelogEntry version="1.2.0" date="2026-03-24">
  <ChangelogLabel type="added">New Accordion component</ChangelogLabel>
</ChangelogEntry>

Adding Options

Put several labels in one entry, then stack entries to build the timeline. version is optional, so a patch entry can show the date alone.

2026-03-241.2.0
New Accordion componentSearch index performance
2026-03-151.1.0
Sidebar navigation spacing
2026-03-02
Anchor links in nested headings
app/features/components/changelog.mdx
MDX
<ChangelogEntry version="1.2.0" date="2026-03-24">
  <ChangelogLabel type="added">New Accordion component</ChangelogLabel>
  <ChangelogLabel type="fixed">Search index performance</ChangelogLabel>
</ChangelogEntry>
 
<ChangelogEntry version="1.1.0" date="2026-03-15">
  <ChangelogLabel type="changed">Sidebar navigation spacing</ChangelogLabel>
</ChangelogEntry>
 
<ChangelogEntry date="2026-03-02">
  <ChangelogLabel type="fixed">Anchor links in nested headings</ChangelogLabel>
</ChangelogEntry>

Advanced

A major release usually needs prose between the labels. Write a normal paragraph inside the entry and it flows with the label lines. This entry shows all seven types, a label left empty printing its own type name, and case-insensitive matching — Security styles the same as security.

2026-04-012.0.0
Node 24 is the new minimum

Upgrade Node before pulling this release; the build fails on Node 22.

26 theme palettesSidebar groups now collapseLegacy CSS color variablesOld config APIPatched session validationfixed
app/features/components/changelog.mdx
MDX
<ChangelogEntry version="2.0.0" date="2026-04-01">
  <ChangelogLabel type="breaking">Node 24 is the new minimum</ChangelogLabel>
 
Upgrade Node before pulling this release; the build fails on Node 22.
 
  <ChangelogLabel type="added">26 theme palettes</ChangelogLabel>
  <ChangelogLabel type="changed">Sidebar groups now collapse</ChangelogLabel>
  <ChangelogLabel type="removed">Legacy CSS color variables</ChangelogLabel>
  <ChangelogLabel type="deprecated">Old config API</ChangelogLabel>
  <ChangelogLabel type="Security">Patched session validation</ChangelogLabel>
  <ChangelogLabel type="fixed"></ChangelogLabel>
</ChangelogEntry>

Options

ChangelogEntry

datestringrequired

Release date, printed as-is in small tertiary text. The component does no date parsing or formatting, so pick one format and keep it.

versionstring

Version number shown in a bold badge next to the date. Omit it and only the date renders.

childrenReactNoderequired

Entry body: ChangelogLabel elements, prose, or both. Children are spaced vertically inside a not-prose wrapper.

ChangelogLabel

typestringrequired

One of the seven values below. Matching is case-insensitive, so Added and ADDED both work, and an unrecognized value falls back to the green added styling.

childrenReactNode

Label text, rendered uppercase inside the pill. Leave it empty and the pill prints the type value instead.

Label types

Seven types, five colors. removed and breaking share red, and changed and deprecated share amber, so pick by meaning and let the text carry the rest.

addedlabel type

Green. A new feature, component, or option.

fixedlabel type

Blue. A bug that no longer happens.

changedlabel type

Amber. Existing behavior that works differently now.

removedlabel type

Red. Something that used to exist and is gone.

breakinglabel type

Red. A change that needs work from the reader before they upgrade.

deprecatedlabel type

Amber. Still working, scheduled for removal.

securitylabel type

Purple. A patched vulnerability or a hardening change.

Related pages

Release Notes

Badge

Was this page helpful?