Components
Loading preview...
Here is modern minimalistic timeline component
npx shadcn@latest add https://21st.dev/r/Codehagen/timeline"use client";
import { Timeline } from "@/components/ui/timeline";
import { Sparkles, Code } from "lucide-react";
export default function Example() {
return (
<Timeline
items={[
{
date: "2024-01-07",
title: "New Feature",
description: "Added dark mode support",
href: "/changelog/dark-mode",
icon: <Sparkles className="h-3 w-3" />,
},
{
date: "2024-01-05",
title: "Bug Fix",
description: "Fixed mobile navigation",
href: "/changelog/mobile-nav",
icon: <Code className="h-3 w-3" />,
},
{
date: "2024-01-07",
title: "New Feature",
description: "Added dark mode support",
href: "/changelog/dark-mode",
icon: <Sparkles className="h-3 w-3" />,
},
{
date: "2024-01-05",
title: "Bug Fix",
description: "Fixed mobile navigation",
href: "/changelog/mobile-nav",
icon: <Code className="h-3 w-3" />,
}
]}
initialCount={3}
showMoreText="Load More"
showLessText="Show Less"
dotClassName="bg-gradient-to-b from-background to-muted ring-1 ring-border"
lineClassName="border-l border-border"
/>
)
}