---
title: Release Note
description: The Release Note component makes it easy for you to write updates for each version of your application.
date: 31-12-2024
---

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:

```jsx
<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>
```

<Accordion title="Render As" defaultOpen={true}>
<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>
</Accordion>

## 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 |

```jsx
<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

```jsx
<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:

````plaintext
<!-- 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

1. **Date Format**: Use a consistent date format for all releases.
2. **Version Ordering**: Arrange versions in reverse chronological order (newest version at the top).
3. **List Items**: You can use standard Markdown list format (`-` or `*`) or write text directly, the component will handle the formatting.
4. **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>`