# Growth Timeline

> A vertical timeline pairing dates with the numbers you hit at each stage. Use it to chart company momentum on an about page or investor deck.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/marketing-stats-growth-timeline).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/marketing-stats-growth-timeline
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/marketing-stats-growth-timeline-light-a248a5ce717ac16f.png
- Registry item: https://www.shadcn-ui-blocks.com/r/marketing-stats-growth-timeline.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/marketing-stats-growth-timeline.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `class-variance-authority`, `lucide-react`, `radix-ui`

## Files

### `components/blocks/marketing/stats/growth-timeline.tsx`

```tsx
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import {
  Activity,
  ArrowRight,
  Award,
  BarChart,
  CalendarDays,
  Users,
} from 'lucide-react';

type Milestone = {
  id: string;
  year: string;
  title: string;
  description: string;
  metric: {
    value: string;
    label: string;
  };
  icon: React.ReactNode;
};

const milestones: Milestone[] = [
  {
    id: 'launch',
    year: '2018',
    title: 'Company Founded',
    description: 'Started with a small team of 5 passionate individuals',
    metric: {
      value: '5',
      label: 'Team Members',
    },
    icon: <CalendarDays className="h-8 w-8" />,
  },
  {
    id: 'first-customers',
    year: '2019',
    title: 'First 100 Customers',
    description: 'Achieved product-market fit and began scaling operations',
    metric: {
      value: '100+',
      label: 'Early Adopters',
    },
    icon: <Users className="h-8 w-8" />,
  },
  {
    id: 'series-a',
    year: '2020',
    title: 'Series A Funding',
    description: 'Secured $8M in funding to accelerate growth and development',
    metric: {
      value: '$8M',
      label: 'Raised',
    },
    icon: <BarChart className="h-8 w-8" />,
  },
  {
    id: 'expansion',
    year: '2021',
    title: 'International Expansion',
    description: 'Expanded to 12 countries across Europe, Asia, and Australia',
    metric: {
      value: '12',
      label: 'Countries',
    },
    icon: <Activity className="h-8 w-8" />,
  },
  {
    id: 'acquisition',
    year: '2022',
    title: 'Strategic Acquisition',
    description: 'Acquired leading analytics provider to enhance our platform',
    metric: {
      value: '2x',
      label: 'Product Growth',
    },
    icon: <Award className="h-8 w-8" />,
  },
  {
    id: 'unicorn',
    year: '2023',
    title: 'Unicorn Status',
    description:
      'Reached $1B valuation with 10,000+ enterprise customers worldwide',
    metric: {
      value: '10K+',
      label: 'Enterprise Clients',
    },
    icon: <Award className="h-8 w-8" />,
  },
];

export default function GrowthTimeline() {
  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      <div className="mx-auto max-w-5xl">
        <div className="mb-16 text-center">
          <Badge className="mb-4">Our Journey</Badge>
          <h2 className="mb-4 text-3xl font-bold md:text-5xl">
            Growing From Startup to Industry Leader
          </h2>
          <p className="text-muted-foreground mx-auto max-w-3xl text-lg">
            Track our exponential growth journey from a small startup to
            becoming the market leader.
          </p>
        </div>

        {/* Timeline */}
        <div className="relative mt-24">
          {/* Timeline line */}
          <div className="bg-border absolute top-0 bottom-0 left-0 w-px transform md:left-1/2 md:-translate-x-1/2" />

          {/* Timeline items */}
          <div className="relative space-y-12 md:space-y-24">
            {milestones.map((milestone, index) => (
              <div
                key={milestone.id}
                className={cn(
                  'flex flex-col gap-8 md:flex-row md:gap-0',
                  index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
                )}
              >
                {/* Content */}
                <div className="ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8">
                  <div className="bg-muted mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold">
                    {milestone.year}
                  </div>
                  <h3 className="mb-2 text-xl font-bold">{milestone.title}</h3>
                  <p className="text-muted-foreground mb-4">
                    {milestone.description}
                  </p>

                  <div className="bg-background flex items-center gap-4 rounded-lg border p-4 shadow-sm">
                    <div className="bg-primary/10 flex h-16 w-16 items-center justify-center rounded-full">
                      {milestone.icon}
                    </div>
                    <div>
                      <div className="text-primary text-3xl font-bold">
                        {milestone.metric.value}
                      </div>
                      <div className="text-muted-foreground text-sm">
                        {milestone.metric.label}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Timeline point */}
                <div className="absolute left-0 flex -translate-x-1/2 transform items-center justify-center md:left-1/2">
                  <div className="border-background bg-primary h-5 w-5 rounded-full border-4" />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Current stats */}
        <div className="bg-muted mt-24 rounded-lg p-8">
          <h3 className="mb-6 text-center text-2xl font-bold">
            Where We Are Today
          </h3>
          <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
            <div className="text-center">
              <div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
                $1B+
              </div>
              <p className="text-muted-foreground font-medium">
                Company Valuation
              </p>
            </div>
            <div className="text-center">
              <div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
                180+
              </div>
              <p className="text-muted-foreground font-medium">Team Members</p>
            </div>
            <div className="text-center">
              <div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
                24
              </div>
              <p className="text-muted-foreground font-medium">Countries</p>
            </div>
            <div className="text-center">
              <div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
                12K+
              </div>
              <p className="text-muted-foreground font-medium">
                Global Customers
              </p>
            </div>
          </div>
        </div>

        {/* Future */}
        <div className="mt-16 text-center">
          <h3 className="mb-4 text-2xl font-bold">
            The Future Is Even Brighter
          </h3>
          <p className="text-muted-foreground mx-auto mb-8 max-w-2xl">
            We&apos;re just getting started. Our roadmap includes expansion to
            new markets, enhanced product offerings, and continued innovation to
            serve our growing customer base.
          </p>
          <a
            href="#"
            className="text-primary inline-flex items-center font-medium hover:underline"
          >
            View our roadmap
            <ArrowRight className="ml-2 h-4 w-4" />
          </a>
        </div>
      </div>
    </div>
  );
}
```

### `components/ui/badge.tsx`

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary:
          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive:
          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
        outline:
          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        ghost:
          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "span"

  return (
    <Comp
      data-slot="badge"
      data-variant={variant}
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
```