Overview

Changelog components create timeline-based release notes. Use <ChangelogWrapper> to wrap multiple <Update> entries for a cohesive changelog page.

Basic Structure

<ChangelogWrapper>

<Update label="January 2025" description="v2.0.0" tags={["new", "breaking"]}>

## Major Release

### Added

- New feature A
- New feature B

### Changed

- Breaking change in API

</Update>

<Update label="December 2024" description="v1.5.0" tags={["improvement"]}>

## Improvements

- Performance optimizations
- Bug fixes

</Update>

</ChangelogWrapper>

Update Component

<Update label="March 2025">

<Update label="March 2025" description="v2.1.0">

<Update tags={["new", "improvement", "bugfix"]}>

<Update image="/images/feature-screenshot.png">

Complete Example

---
title: API Changelog
description: Latest updates and changes to the API
published: true
---

<ChangelogWrapper>

<Update
  label="February 2025"
  description="v2.2.0"
  tags={["new", "improvement"]}
>

## Webhook Retry Logic

### Added

- Automatic webhook retry with exponential backoff
- Webhook delivery status dashboard
- Custom retry configuration per endpoint

### Improved

- Webhook payload validation
- Error messages now include request IDs
- Response time reduced by 30%

</Update>

<Update
  label="January 2025"
  description="v2.1.0"
  tags={["new", "bugfix"]}
  image="/images/new-dashboard.png"
>

## New Analytics Dashboard

### Added

- Real-time API usage analytics
- Custom date range filtering
- Export to CSV functionality

### Fixed

- Rate limit headers now correctly reflect remaining quota
- Resolved timezone issues in timestamp responses
- Fixed pagination bug in list endpoints

</Update>

<Update
  label="December 2024"
  description="v2.0.0"
  tags={["breaking", "new"]}
>

## Major Version Release

### Breaking Changes

- Authentication now requires API version header
- `user_id` field renamed to `userId` (camelCase)
- Deprecated endpoints removed (see migration guide)

### Added

- OAuth 2.0 support
- GraphQL API beta
- Webhook signature verification

### Improved

- 50% faster response times
- Better error messages with suggested fixes
- Comprehensive API documentation

</Update>

</ChangelogWrapper>

ChangelogWrapper Features

Scroll Progress Indicator

The wrapper adds an animated progress bar that fills as you scroll through the changelog.

Timeline Visualization

Updates are displayed in a vertical timeline with:

• Circular indicators
• Connecting lines
• Sticky date labels (desktop)
• Responsive layout

Color Coding

Timeline indicators use your site's color palette for consistency.

Best Practices

Use Clear Labels

Good:

• "March 2025"
• "2024-12-15"
• "Q1 2025"

Avoid:

• "Update 1"
• "Recent"
• "Last week"

Include Version Numbers

<Update label="January 2025" description="v2.0.0">

Organize Content

Structure updates consistently:

<Update ...>

## Update Title

### Added

- New features

### Changed

- Modifications

### Fixed

- Bug fixes

### Deprecated

- Soon-to-be-removed features

### Removed

- Deleted features (breaking changes)

</Update>

Use Tags Effectively

• new - New features
• improvement - Enhancements
• bugfix - Bug fixes
• breaking - Breaking changes
• deprecated - Deprecation notices
• security - Security updates

Add Visual Context

Include screenshots for major UI changes:

<Update label="March 2025" image="/images/new-feature.png">
  Description of the visual change...
</Update>

Anchor Links

Each update creates an anchor link from its label:

See the [January 2025 update](#january-2025) for details.

Responsive Design

• Desktop: Dates sticky on left, content on right
• Mobile: Compact timeline with dates inline

This completes the components documentation. Next, explore OpenAPI Setup for API documentation.