@allem-ui/changelog

@allem-ui/changelog

Changelog and release timeline components for Allem UI -- timeline layouts, version badges, and grouped change entries.

Installation

npm install @allem-ui/changelog @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/changelog";
@source "@allem-ui/theme";

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

import {
  ChangelogTimeline,
  ChangelogEntry,
  VersionBadge,
  ChangelogGroup,
  ChangelogGroupItem,
} from "@allem-ui/changelog";

export function ReleasePage() {
  return (
    <ChangelogTimeline>
      <ChangelogEntry date="2025-01-15">
        <VersionBadge type="major">v2.0.0</VersionBadge>
        <ChangelogGroup type="added">
          <ChangelogGroupItem>New DataGrid component</ChangelogGroupItem>
          <ChangelogGroupItem>Dark mode improvements</ChangelogGroupItem>
        </ChangelogGroup>
        <ChangelogGroup type="fixed">
          <ChangelogGroupItem>Modal focus trap on mobile</ChangelogGroupItem>
        </ChangelogGroup>
      </ChangelogEntry>
    </ChangelogTimeline>
  );
}

Components

Component	Description
ChangelogTimeline	Vertical timeline container for changelog entries
ChangelogEntry	Single release entry with date and content
VersionBadge	Colored badge for major, minor, and patch versions
ChangelogGroup	Groups changes by type (added, fixed, changed, removed)
ChangelogGroupItem	Individual change item within a group

Features

• Timeline layout -- Vertical timeline with connecting lines and date markers
• Version badges -- Color-coded badges for major, minor, and patch releases
• Grouped changes -- Organize entries by added, fixed, changed, removed
• Composable -- Build custom changelog layouts with individual components
• Dark mode -- First-class dark mode with dark: Tailwind prefix
• TypeScript strict -- Full type safety with exported prop types
• Tree-shakeable -- ESM + CJS builds, import only what you use

Part of Allem UI

This is a standalone package in the Allem UI monorepo. For core components, see @allem-ui/react.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem