# React Chrono changelog > Timeline component for React, in vertical, horizontal and tree layouts. - Vendor: Prabhu Murthy - Category: Frameworks & Libraries - Official site: https://github.com/prabhuignoto/react-chrono - Tracked by: What's New (https://whatsnew.fyi/product/react-chrono) - Harvested from: GitHub (prabhuignoto/react-chrono) - Entries below: 10 (newest first) What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog. Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'. ## Releases ### 3.3.3 - Date: 2025-12-17 - Version: 3.3.3 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.3.3 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.3.3 - **removed** — Removed ladle and sonar dependencies - **changed** — Enhanced the Timeline card component ##### What's Changed * Cleanup: removed ladle, sonar by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/595 * Cleanup + Minor enhancements to the Timeline card + minor doc updates by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/598 **Full Changelog**: https://github.com/prabhuignoto/react-chrono/compare/3.3.2...3.3.3 ### 3.3.2 - Date: 2025-12-09 - Version: 3.3.2 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.3.2 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.3.2 - **fixed** — Auto-select first timeline card in horizontal mode - **changed** — Migrate from pnpm to Bun ##### What's Changed * Migrate from pnpm to Bun by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/590 * Fix: Auto-select-first timeline card in horizontal mode by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/593 **Full Changelog**: https://github.com/prabhuignoto/react-chrono/compare/3.3.1...3.3.2 ### 3.3.1 - Date: 2025-12-02 - Version: 3.3.1 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.3.1 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.3.1 - **fixed** — Fix gaps between timeline blocks when there are few timeline items - **added** — Add collapsible demo sidebar - **changed** — Optimize images ##### What's Changed * fix gaps between timeline blocks when there are few timeline items by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/582 * [ImgBot] Optimize images by @imgbot[bot] in https://github.com/prabhuignoto/react-chrono/pull/581 * feat: add collapsible demo sidebar by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/583 * Docs/readme update and benchmark setup by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/584 **Full Changelog**: https://github.com/prabhuignoto/react-chrono/compare/3.3.0...3.3.1 ### 3.3.0 - Date: 2025-11-25 - Version: 3.3.0 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.3.0 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.3.0 - **added** — Add read more/expand functionality to ContentDisplay component with overflow detection - **added** — Add theme and line width customization for horizontal timeline - **changed** — Enhance dynamic item updates with improved state preservation and scroll position tracking - **changed** — Improve dark mode synchronization in TimelineContextProvider - **changed** — Refactor design token system to consolidate semantic tokens and deprecate legacy imports - **changed** — Improve focus behavior in timeline component with better initial render handling - **changed** — Update CSS styles for media details expanded and minimized states - **changed** — Enhance timeline card styles and nested timeline layout - **changed** — Optimize component re-renders with memoization and useCallback - **fixed** — Fix custom elements in left content - **fixed** — Fix item update handling to differentiate between appends and replacements ###### Features - Add read more/expand functionality to ContentDisplay component with overflow detection - Enhance dynamic item updates with improved state preservation and scroll position tracking - Add theme and line width customization for horizontal timeline - Improve dark mode synchronization in TimelineContextProvider ###### Improvements - Refactor design token system: consolidate semantic tokens, deprecate legacy imports - Improve focus behavior in timeline component with better initial render handling - Update CSS styles for media details expanded/minimized states - Enhance timeline card styles and nested timeline layout - Optimize component re-renders with memoization and useCallback ###### Bug Fixes - Fix custom elements in left content (Fixes #520) - Fix item update handling to differentiate between appends and replacements ### 3.2.2 - Date: 2025-11-23 - Version: 3.2.2 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.2.2 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.2.2 - **added** — Add comprehensive examples to Storybook - **fixed** — Configure vanilla-extract for Storybook production builds - **fixed** — Improve focus behavior and cleanup code ##### What's Changed * Feat/comprehensive-examples-storybook by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/563 * fix: configure vanilla-extract for Storybook production builds by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/566 * Add-storybook-link by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/567 * fix: improve focus behavior and cleanup code by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/569 **Full Changelog**: https://github.com/prabhuignoto/react-chrono/compare/3.2.1...3.2.2 ### 3.2.1 - Date: 2025-11-11 - Version: 3.2.1 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.2.1 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.2.1 - **fixed** — Enable scrolling during slideshow for proper timeline item centering - **changed** — Modified useTimelineItemNavigation to allow scrolling to trigger regardless of slideshow state, ensuring items are properly centered when navigating during slideshow mode - Fix: Enable scrolling during slideshow for proper timeline item centering (#559) - Modified useTimelineItemNavigation.ts to allow scrolling to trigger regardless of slideshow state, ensuring items are properly centered when navigating during slideshow mode - Updated visual snapshot for timeline point styling - CI: Added Dependabot GitHub workflow configuration ### 3.2.0 - Date: 2025-11-08 - Version: 3.2.0 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.2.0 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.2.0 - **fixed** — Fix links, buttons, and form inputs not working inside timeline cards - **added** — Add fine-grained control over card content alignment with horizontal and vertical options - **fixed** — Fix array mutation bug causing items to be skipped during dynamic loading - **fixed** — Fix timeline not updating correctly when using Array.map() to render children dynamically - **fixed** — Verify hash-based comparison prevents circular structure errors with React components in content - **added** — Add auto card height feature to automatically size cards based on content ##### 🐛 Bug Fixes ### Interactive Elements (#490) Fixed links, buttons, and form inputs not working inside timeline cards. Interactive elements now function correctly without triggering card selection. ### Content Alignment (#431) Added fine-grained control over card content alignment: ```jsx content={{ alignment: { horizontal: 'center', vertical: 'center' }}} ``` Dynamic Loading (#135) Fixed array mutation bug causing items to be skipped during dynamic loading. All items now load correctly. Array.map() Pattern (#291) Timeline now correctly updates when using Array.map() to render children dynamically. Circular JSON (#463) Verified hash-based comparison prevents circular structure errors with React components in content. ✨ New Features Auto Card Height (#498) Cards can now automatically size based on content: ` layout={{ cardHeight: 'auto' }}` ### 3.1.0 - Date: 2025-11-06 - Version: 3.1.0 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.1.0 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.1.0 - **changed** — Enhanced keyboard navigation across all timeline modes - **changed** — Improved focus management and event handling - **changed** — Refined focus ring styling on timeline items - **added** — Expanded test coverage and documentation - Enhanced keyboard navigation across all timeline modes - Improved focus management and event handling - Refined focus ring styling on timeline items - Expanded test coverage and documentation **Full Changelog**: https://github.com/prabhuignoto/react-chrono/compare/3.0.0...3.1.0 ### 3.0.0 - Date: 2025-10-15 - Version: 3.0.0 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.0.0 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/3.0.0 - **changed** — Migrate styling system from styled-components to Vanilla Extract CSS for zero-runtime CSS-in-TypeScript and improved performance - **added** — Add type-safe design tokens system with sprinkles utilities for consistent styling across components - **changed** — Consolidate multiple context providers into a single optimized TimelineContextProvider with unified useTimelineContext() hook - **changed** — Implement smart memoization strategies with separated static config, dynamic state, and computed values for optimized re-renders - **changed** — Update Vite configuration with enhanced tree-shaking and bundle optimization - **added** — Add Stylelint configuration and enhanced ESLint rules - **changed** — Improve TypeScript strict mode compliance across all components - **added** — Introduce grouped configuration API with 9 prop categories: layout, interaction, content, display, media, animation, style, accessibility, and i18n - **changed** — Maintain backward compatibility with all v2.x props through automatic mapping to new API - **added** — Add dynamic Google Fonts integration with automatic optimization, caching, and granular control over font families, weights, and styles per element - **added** — Add comprehensive internationalization with 40+ configurable text elements across 11 categories and template string support for dynamic text interpolation - **added** — Add fullscreen mode with cross-browser support, keyboard shortcuts, and proper portal container management - **added** — Expand dark mode with 25+ theme properties including button states, shadows, glows, and search highlighting, with runtime theme switching via onThemeChange callback - **added** — Add sticky toolbar option with configurable placement - **added** — Add customizable search with configurable input widths and toolbar positioning - **added** — Add borderless card variant design - **added** — Add text density control with dynamic card remeasurement when switching between compact and detailed views - **changed** — Improve keyboard navigation with better focus management and visual feedback - **changed** — Implement context-aware popover positioning with fullscreen awareness - **changed** — Refine slideshow transitions with improved card animations and progress indicators ##### v3.0.0 - Major Release > 🎉 A complete architectural evolution with powerful new features, improved performance, and enhanced developer experience --- ###### 🏗️ **Architecture & Performance** ###### Styling System Migration - ⚡ **Migrated to Vanilla Extract CSS** - Replaced styled-components with Vanilla Extract for zero-runtime CSS-in-TypeScript, resulting in significantly improved performance and type-safe styling - 🎨 **Type-Safe Design Tokens** - Comprehensive token system with sprinkles utilities for consistent styling across components ###### Context System Redesign - 🔄 **Unified Context Provider** - Consolidated multiple context providers into a single optimized `TimelineContextProvider`, reducing complexity and improving render performance - 🚀 **Optimized Re-renders** - Smart memoization strategies with separated static config, dynamic state, and computed values - 💡 **Enhanced Developer Experience** - Simpler API with `useTimelineContext()` hook replacing multiple context hooks ###### Build & Tooling Improvements - 🛠️ **Modern Build Pipeline** - Updated Vite configuration with enhanced tree-shaking and bundle optimization - 📊 **Code Quality** - Added Stylelint configuration, enhanced ESLint rules, and improved TypeScript strict mode compliance --- ###### ✨ **New Features** ###### Grouped Configuration API ```jsx ``` - 📋 **Logical Organization** - Props grouped into 9 intuitive categories: `layout`, `interaction`, `content`, `display`, `media`, `animation`, `style`, `accessibility`, `i18n` - 🔄 **Backward Compatible** - All v2.x props continue to work with automatic mapping to new API - 💡 **Better Autocomplete** - Improved IDE support with structured prop hierarchy ###### Google Fonts Integration - 🔤 **Dynamic Font Loading** - Seamless Google Fonts integration with automatic optimization and caching - 🎯 **Granular Control** - Configure font families, weights, and styles per element (titles, subtitles, card text) - ⚡ **Performance Optimized** - Intelligent font preloading and fallback strategies ###### Comprehensive Internationalization - 🌍 **40+ Configurable Text Elements** - Complete i18n coverage across 11 categories (navigation, search, toolbar, media, accessibility, etc.) - 📝 **Template String Support** - Dynamic text interpolation with variables (e.g., "Page {current} of {total}") - 🔀 **Smart Fallbacks** - Intelligent default text resolution with only-override-what-you-need approach ###### Fullscreen Mode - 🖥️ **Cross-Browser Support** - Full-screen timeline experience with vendor prefix handling for all major browsers - ⌨️ **Keyboard Shortcuts** - ESC to exit, consistent behavior across all modes - 🎯 **Portal Optimization** - Proper portal container management for fullscreen-aware components ###### Enhanced Dark Mode - 🌙 **25+ Theme Properties** - Comprehensive dark mode support including button states, shadows, glows, and search highlighting - 🎨 **Automatic Color Adaptation** - Intelligent contrast handling for readability - 🔄 **Runtime Theme Switching** - Seamless dark/light mode transitions with `onThemeChange` callback ###### Advanced UI Controls - 📌 **Sticky Toolbar** - Optional sticky positioning for toolbar with configurable placement - 🔍 **Customizable Search** - Configurable search input widths and toolbar positioning - 🎴 **Borderless Card Variant** - Clean, minimal card design for modern interfaces - 📏 **Text Density Control** - Dynamic card remeasurement when switching between compact/detailed views --- ###### 🎨 **UX Improvements** ###### Navigation & Interaction - ⌨️ **Enhanced Keyboard Navigation** - Improved focus management with bet _[Truncated at 4000 characters — full notes: https://github.com/prabhuignoto/react-chrono/releases/tag/3.0.0]_ ### 2.9.1 - Date: 2025-06-05 - Version: 2.9.1 - Original notes: https://github.com/prabhuignoto/react-chrono/releases/tag/2.9.1 - Permalink: https://whatsnew.fyi/product/react-chrono/releases/2.9.1 - **changed** — Optimize hooks for performance and stability ##### What's Changed * Optimize hooks for performance and stability by @prabhuignoto in https://github.com/prabhuignoto/react-chrono/pull/543 **Full Changelog**: https://github.com/prabhuignoto/react-chrono/compare/2.9.0...2.9.1