Changelog Motion

Motion

A React changelog timeline where each release slides in on scroll with version, date, title, an optional New, Fix or Premium badge and a bullet list.

src/registry/premium/changelog-motion.tsx/r/changelog-motion.json

Installation#

bash

npx shadcn@latest add @minidev/changelog-motion

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/changelog-motion.json

Usage#

tsx

import { ChangelogMotion } from "@/components/ui/changelog-motion"

export function Example() {
  return (
    <ChangelogMotion entries={[
      { version: "v0.6.0", date: "Sep 14", title: "Premium elevation", tag: "Premium", items: ["Kinetic type", "Sticky story", "Launch kit"] },
      { version: "v0.5.0", date: "Sep 14", title: "Email + admin + page kits", tag: "Premium", items: ["Email templates", "Admin console", "Pricing / careers / blog"] },
      { version: "v0.4.0", date: "Sep 14", title: "Premium templates", tag: "Premium", items: ["SaaS landing", "Docs marketing", "Changelog motion"] },
    ]} />
  )
}