/>
MDX UI
$ init
Changelog

Changelog

Versioned changelog with a timeline, date stamps, and typed change badges

Installation

npx @ravikumarsurya/mdx-ui add changelog

Usage

<Changelog>
  <ChangelogEntry version="0.0.25" date="2025-05-08">
    <ChangelogItem type="added">
      Link component with external link detection
    </ChangelogItem>
    <ChangelogItem type="added">Spoiler collapsible component</ChangelogItem>
    <ChangelogItem type="fixed">Video iframe lazy loading</ChangelogItem>
  </ChangelogEntry>
  <ChangelogEntry version="0.0.24" date="2025-04-20">
    <ChangelogItem type="added">Alert, Card, Kbd components</ChangelogItem>
    <ChangelogItem type="changed">
      All components updated with forwardRef + displayName
    </ChangelogItem>
  </ChangelogEntry>
</Changelog>
v1.2.02025-04-10
  • AddedNew Demo with shiki dual-theme highlighting
  • AddedSpoiler and Reveal components
  • FixedAccordion keyboard navigation on Safari
v1.1.02025-03-01
  • AddedSecurityNote component with severity levels
  • ChangedBadge now uses CVA for variant management
  • RemovedLegacy ColorSwatch component

Change types

TypeBadgeUse for
added
  • AddedNew feature
    		• New features
    fixed
  • FixedBug fix
    		• Bug fixes
    changed
  • ChangedUpdate
    		• Changes to existing behaviour
    removed
  • RemovedDeprecated
    		• Removed features
    security
  • SecurityPatch
    		• Security patches

    Props

    Changelog

    Wrapper with a vertical timeline line. Accepts standard div props + className.

    ChangelogEntry

    PropTypeDescription
    versionstringVersion string shown as heading (required)
    datestringOptional date label beside the version
    classNamestringExtra classes

    ChangelogItem

    PropTypeDefaultDescription
    type"added" | "fixed" | "changed" | "removed" | "security""added"Change type badge
    childrenReactNode—Description of the change
    PreviousCallout
    NextCode Block