@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