Release Note

The Release Note component makes it easy for you to write updates for each version of your application.

The Release Note component makes it easy for you to write and display changelogs in a structured and organized way. This component consists of two main parts: Release and Changes which can be used to display version, date, release title, and a list of changes categorized by type.

Basic Usage

Here is a basic example of using the Release Note component:

<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
  <Changes type="added">
    - New feature to improve accessibility
    - Keyboard navigation support for dialog components
  </Changes>
  <Changes type="fixed">
    - Bug fix for mobile menu
    - Fixed loading issues on documentation pages
  </Changes>
</Release>

v1.10.1

May 24, 2025

Accessibility Improvements and Bug Fixes

Added

- New feature to improve accessibility
- Keyboard navigation support for dialog components

Fixed

- Bug fix for mobile menu
- Fixed loading issues on documentation pages

Release Component

The Release component is used to display key information about a release version, such as version number, release date, and title.

Release Props

Prop	Type	Required	Description
`version`	string	✅	Version number to display (without "v" prefix)
`title`	string	✅	Title or name of the release
`date`	string	❌	Release date in a valid format (example: "2025-05-24")
`children`	ReactNode	✅	Child content, typically `Changes` components

<Release
  version="1.10.1"
  date="2025-05-24"
  title="Accessibility Improvements and Bug Fixes"
>
  {/* Changes content here */}
</Release>

Changes Component

The Changes component is used to group changes by category with appropriate icons and colors.

Changes Props

Prop	Type	Required	Description
`type`	string	✅	Type of change: 'added', 'fixed', 'improved', 'deprecated', or 'removed'
`children`	ReactNode	✅	List of changes, can be text with Markdown formatting

Changes Note

Category	Description
`added`	New features or functionality added
`fixed`	Bugs or issues that have been fixed
`improved`	Enhancements or optimizations to existing features
`deprecated`	Features that are not recommended and may be removed in future
`removed`	Features that have been completely removed

Changes Example

<Changes type="added">
  - New feature to improve accessibility
  - Keyboard navigation support for dialog components
</Changes>

<Changes type="fixed">
  - Bug fix for mobile menu
  - Fixed loading issues on documentation pages
</Changes>

Complete Implementation

Here is a complete example of using the Release Note component in an MDX file:

<!-- hidden heading for TOC -->

<Release version="1.10.1" date="2025-05-24" title="Accessibility Improvements and Bug Fixes">
  <Changes type="added">
    - Keyboard navigation for all interactive components
    - Screen reader support for table components
    - Dark mode feature with system preference detection
  </Changes>

  <Changes type="fixed">
    - Fixed mobile menu bug that wouldn't close when navigating to another page
    - Fixed loading issues on documentation pages
    - Fixed display issues in Safari browser
  </Changes>

  <Changes type="improved">
    - Improved page loading performance
    - Optimized JavaScript bundle size
    - Enhanced responsive design across all viewports
  </Changes>
</Release>

Usage Tips

Date Format: Use a consistent date format for all releases.
Version Ordering: Arrange versions in reverse chronological order (newest version at the top).
List Items: You can use standard Markdown list format (- or *) or write text directly, the component will handle the formatting.
TOC: Use hidden headings to ensure each version is detected in the Table of Contents. Use <div className="sr-only">### v 1.10.1</div>

Edit this page

Published on Dec 31, 2024

PreviousNote

NextStepper