
Vertical product changelog timeline with sticky version badges and dates positioned on left sidebar, dual circle progress dots with border styling, continuous vertical connecting line, scroll-to-anchor ID navigation support, responsive layout with hidden sidebar on mobile, modular content rendering system accepting custom ReactNode components, and category badge displays for feature classification
@shadcn-studio
import ChangelogContent from '@/registry/new-york/components/blocks/timeline-component-05/timeline-component-05'
import type { Release } from '@/registry/new-york/components/blocks/timeline-component-05/timeline-component-05'
import V1_3_0_Content from '@/registry/new-york/components/blocks/timeline-component-05/content/v1-3-0'
import V1_2_0_Content from '@/registry/new-york/components/blocks/timeline-component-05/content/v1-2-0'
import V1_1_0_Content from '@/registry/new-york/components/blocks/timeline-component-05/content/v1-1-0'
export const releases: Release[] = [
{
version: 'v 1.3.0',
date: 'November 7, 2025',
content: <V1_3_0_Content />
},
{
version: 'v 1.2.0',
date: 'March 22, 2025',
content: <V1_2_0_Content />
},
{
version: 'v 1.1.0',
date: 'January 15, 2025',
content: <V1_1_0_Content />
}
]
const ChangelogComponentPage = () => {
return (
<div className='flex min-h-screen flex-col'>
<div className='mx-auto max-w-4xl px-4 py-10 md:px-8 md:py-16'>
<div className='flex flex-col items-start'>
<ChangelogContent releases={releases} />
</div>
</div>
</div>
)
}
export default ChangelogComponentPage




























