Changelog 1

Component 151

About

Modern Changelog view with versions, dates, description images. An array of changelog entries with stick scroll effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Changelog 1 to your project and fits it to your theme.

Code

How Changelog 1 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Changelog1 } from "@/components/ui/changelog-1";

const DemoOne = () => {
  return (
    <Changelog1  
      title="Changelog"
      description="Get the latest updates and improvements to our platform."
      entries={[
        {
          version: "Version 1.3.0",
          date: "15 November 2024",
          title: "Enhanced Analytics Dashboard",
          description:
            "We've completely redesigned our analytics dashboard to provide deeper insights and improved visualizations of your data.",
          items: [
            "Interactive data visualizations with real-time updates",
            "Customizable dashboard widgets",
            "Export analytics in multiple formats (CSV, PDF, Excel)",
            "New reporting templates for common use cases",
            "Improved data filtering and segmentation options",
          ],
          image: "https://cdn.21st.dev/assets/mirror/f3/f3d7e91fc005010a73fc9efbf71e7a7112ce961ce65e4d690d2057a87e72f26c.svg",
          button: {
            url: "https://shadcnblocks.com",
            text: "Learn more",
          }
        },
        {
          version: "Version 1.2.5",
          date: "7 October 2024",
          title: "Mobile App Launch",
          description:
            "We're excited to announce the launch of our mobile application, available now on iOS and Android platforms.",
          items: [
            "Native mobile experience for on-the-go productivity",
            "Offline mode support for working without internet connection",
            "Push notifications for important updates",
            "Biometric authentication for enhanced security",
          ],
        },
        {
          version: "Version 1.2.1",
          date: "23 September 2024",
          title: "New features and improvements",
          description:
            "Here are the latest updates and improvements to our platform. We are always working to improve our platform and your experience.",
          items: [
            "Added new feature to export data",
            "Improved performance and speed",
            "Fixed minor bugs and issues",
            "Added new feature to import data",
          ],
          image: "https://cdn.21st.dev/assets/mirror/f3/f3d7e91fc005010a73fc9efbf71e7a7112ce961ce65e4d690d2057a87e72f26c.svg"
        },
        {
          version: "Version 1.0.0",
          date: "31 August 2024",
          title: "First version of our platform",
          description:
            "Introducing a new platform to help you manage your projects and tasks. We are excited to launch our platform and help you get started. We are always working to improve our platform and your experience.",
          image: "https://cdn.21st.dev/assets/mirror/f3/f3d7e91fc005010a73fc9efbf71e7a7112ce961ce65e4d690d2057a87e72f26c.svg",
          button: {
            url: "https://shadcnblocks.com",
            text: "Learn more"
          }
        }
      ]}
    />
  );
};

export { DemoOne };