Expandable Changelog

Collapsed version entries that open on click to reveal full details. Keeps a long release history short while letting readers drill into any update.

import { Badge } from "@/components/ui/badge";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function ExpandableChangelog() {
  return (
    <div className="container mx-auto max-w-3xl px-4 py-6 sm:py-8">
      <div className="mb-6 sm:mb-8">
        <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
          Changelog
        </h2>
        <p className="text-muted-foreground mt-2">
          Expand each version to see the changes
        </p>
      </div>

      <Accordion
        type="single"
        collapsible
        className="w-full"
        defaultValue="v2.0.0"
      >
        <AccordionItem
          value="v2.0.0"
          className="mb-3 overflow-hidden rounded-lg border sm:mb-4"
        >
          <AccordionTrigger className="hover:bg-muted/40 [&[data-state=open]]:bg-muted/40 px-3 py-3 sm:px-6 sm:py-4">
            <div className="flex w-full flex-wrap items-center gap-2 sm:gap-3">
              <span className="text-base font-medium sm:text-lg">
                Version 2.0.0
              </span>
              <Badge className="text-xs">Latest</Badge>
              <span className="text-muted-foreground text-xs">
                April 15, 2023
              </span>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-3 pt-2 pb-4 sm:px-6">
            <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
              <div>
                <h4 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase sm:mb-3 sm:text-sm">
                  Features & Improvements
                </h4>
                <ul className="space-y-2 sm:space-y-3">
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-1 flex-shrink-0 text-green-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <div>
                      <p className="text-sm font-medium sm:text-base">
                        Redesigned dashboard
                      </p>
                      <p className="text-muted-foreground text-xs sm:text-sm">
                        More intuitive UI with improved accessibility
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-1 flex-shrink-0 text-green-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <div>
                      <p className="text-sm font-medium sm:text-base">
                        Dark mode support
                      </p>
                      <p className="text-muted-foreground text-xs sm:text-sm">
                        Full dark mode across all pages and components
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-1 flex-shrink-0 text-blue-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <div>
                      <p className="text-sm font-medium sm:text-base">
                        Performance improvements
                      </p>
                      <p className="text-muted-foreground text-xs sm:text-sm">
                        40% faster load times and reduced bundle size
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase sm:mb-3 sm:text-sm">
                  Bug Fixes & Changes
                </h4>
                <ul className="space-y-2 sm:space-y-3">
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-1 flex-shrink-0 text-red-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <div>
                      <p className="text-sm font-medium sm:text-base">
                        Fixed accessibility issues
                      </p>
                      <p className="text-muted-foreground text-xs sm:text-sm">
                        Improved keyboard navigation and screen reader support
                      </p>
                    </div>
                  </li>
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-1 flex-shrink-0 text-yellow-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <div>
                      <p className="text-sm font-medium sm:text-base">
                        API changes
                      </p>
                      <p className="text-muted-foreground text-xs sm:text-sm">
                        Restructured endpoints with backward compatibility
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem
          value="v1.2.0"
          className="mb-3 overflow-hidden rounded-lg border sm:mb-4"
        >
          <AccordionTrigger className="hover:bg-muted/40 [&[data-state=open]]:bg-muted/40 px-3 py-3 sm:px-6 sm:py-4">
            <div className="flex w-full flex-wrap items-center gap-2 sm:gap-3">
              <span className="text-base font-medium sm:text-lg">
                Version 1.2.0
              </span>
              <span className="text-muted-foreground text-xs">
                March 2, 2023
              </span>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-3 pt-2 pb-4 sm:px-6">
            <div className="space-y-3 sm:space-y-4">
              <div>
                <h4 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase sm:mb-3 sm:text-sm">
                  Features & Improvements
                </h4>
                <ul className="space-y-2">
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-0.5 flex-shrink-0 text-green-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <p className="text-sm sm:text-base">
                      Added new analytics dashboard with advanced filters
                    </p>
                  </li>
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-0.5 flex-shrink-0 text-blue-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <p className="text-sm sm:text-base">
                      Improved mobile responsiveness across all views
                    </p>
                  </li>
                </ul>
              </div>
              <div>
                <h4 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase sm:mb-3 sm:text-sm">
                  Bug Fixes
                </h4>
                <ul className="space-y-2">
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-0.5 flex-shrink-0 text-red-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <p className="text-sm sm:text-base">
                      Fixed bug with user authentication
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem
          value="v1.1.0"
          className="mb-3 overflow-hidden rounded-lg border sm:mb-4"
        >
          <AccordionTrigger className="hover:bg-muted/40 [&[data-state=open]]:bg-muted/40 px-3 py-3 sm:px-6 sm:py-4">
            <div className="flex w-full flex-wrap items-center gap-2 sm:gap-3">
              <span className="text-base font-medium sm:text-lg">
                Version 1.1.0
              </span>
              <span className="text-muted-foreground text-xs">
                January 15, 2023
              </span>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-3 pt-2 pb-4 sm:px-6">
            <div className="space-y-3 sm:space-y-4">
              <div>
                <h4 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase sm:mb-3 sm:text-sm">
                  What&apos;s New
                </h4>
                <ul className="space-y-2">
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-0.5 flex-shrink-0 text-green-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <p className="text-sm sm:text-base">
                      Added support for custom themes
                    </p>
                  </li>
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-0.5 flex-shrink-0 text-green-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <p className="text-sm sm:text-base">
                      Improved form validation with helpful error messages
                    </p>
                  </li>
                  <li className="flex gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mt-0.5 flex-shrink-0 text-blue-500"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <p className="text-sm sm:text-base">
                      Updated documentation with more examples
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem
          value="v1.0.0"
          className="overflow-hidden rounded-lg !border"
        >
          <AccordionTrigger className="hover:bg-muted/40 [&[data-state=open]]:bg-muted/40 px-3 py-3 sm:px-6 sm:py-4">
            <div className="flex w-full flex-wrap items-center gap-2 sm:gap-3">
              <span className="text-base font-medium sm:text-lg">
                Version 1.0.0
              </span>
              <span className="text-muted-foreground text-xs">
                December 1, 2022
              </span>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-3 pt-2 pb-4 sm:px-6">
            <p className="text-muted-foreground text-sm sm:text-base">
              Initial release of the product.
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

About this block

Expandable Changelog opens with a bold "Changelog" heading and a short subtitle, then presents each release as a bordered, rounded accordion row. Every row shows the version number, an optional "Latest" badge, and a date in the trigger bar. Clicking a row expands it to reveal a two-column grid: one column for features and improvements, one for bug fixes and changes. Each item inside carries a color-coded checkmark icon, a short title, and a one-line description. The most recent entry opens by default so visitors land on current news without an extra click.

The heading, subtitle, and every accordion entry are independent. You can add or remove releases, rename the two-column headers, and adjust the item lists inside each entry without touching the rest of the layout. The badge only appears on the row you mark as latest, so promoting a new release is a single copy change.

When to use

This layout works well when your release history is long enough that showing everything at once would overwhelm the page, but readers still need quick access to any version. For a product analytics SaaS, it is a natural fit on a public changelog or a "what shipped" page linked from the dashboard. The accordion keeps the list compact while letting a data team or power user drill straight into the specific build notes they need, without the tab-switching overhead of a tabbed layout or the dense scrolling of a compact list.

A natural flow around it on a Marketing (Legacy) page:

Before

Feature Sections to summarize what the product does before readers reach the version history
Stats showing growth or reliability numbers to set confidence before the changelog

After

CTA Sections to convert readers who just reviewed recent progress
Subscribe so visitors can opt in to release notifications after browsing the history

What you can customize

Each accordion entry is self-contained, so the block adapts well to different release cadences and note styles:

Version rows. Add as many accordion items as your history requires; each row independently carries its version label, date, and optional badge.
Two-column detail grid. The latest entry uses a side-by-side layout for features and fixes; earlier entries can use the simpler single-column list already shown in v1.2.0 and v1.1.0.
Section headings inside entries. The column headers ("Features & Improvements", "Bug Fixes & Changes") are plain text and can be renamed to match your own taxonomy such as "New", "Deprecated", or "Security".

Tip: open the most impactful recent release by default rather than always the latest version number; that is the entry most readers actually want.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

Feature Sections to summarize what the product does before readers reach the version history
Stats showing growth or reliability numbers to set confidence before the changelog

After

CTA Sections to convert readers who just reviewed recent progress
Subscribe so visitors can opt in to release notifications after browsing the history

What you can customize

Each accordion entry is self-contained, so the block adapts well to different release cadences and note styles:

Version rows. Add as many accordion items as your history requires; each row independently carries its version label, date, and optional badge.
Two-column detail grid. The latest entry uses a side-by-side layout for features and fixes; earlier entries can use the simpler single-column list already shown in v1.2.0 and v1.1.0.
Section headings inside entries. The column headers ("Features & Improvements", "Bug Fixes & Changes") are plain text and can be renamed to match your own taxonomy such as "New", "Deprecated", or "Security".

Tip: open the most impactful recent release by default rather than always the latest version number; that is the entry most readers actually want.

Expandable Changelog

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize