Timeline List

A vertical timeline arranging products or drops by date with images and prices. Good for release schedules, new arrivals, and limited editions.

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Bell, Clock, Star } from 'lucide-react';
import { useState } from 'react';

interface Product {
  id: number;
  name: string;
  image: string;
  price: number;
  releaseDate: string;
  status: 'available' | 'coming_soon' | 'pre_order';
  description: string;
  rating?: number;
  reviews?: number;
  estimatedShipping?: string;
}

export default function TimelineList() {
  const [notifyProducts, setNotifyProducts] = useState<number[]>([]);

  const products: Product[] = [
    {
      id: 1,
      name: 'Classic Leather Watch',
      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
      price: 299,
      releaseDate: '2024-02-15',
      status: 'available',
      description: 'Timeless design meets modern functionality',
      rating: 4.9,
      reviews: 128,
    },
    {
      id: 2,
      name: 'Smart Watch Pro',
      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
      price: 499,
      releaseDate: '2024-03-01',
      status: 'pre_order',
      description: 'Next-generation smartwatch with advanced health tracking',
      estimatedShipping: 'Ships in 2-3 weeks',
    },
    {
      id: 3,
      name: 'Sport Watch Elite',
      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
      price: 399,
      releaseDate: '2024-04-15',
      status: 'coming_soon',
      description: 'Professional sports watch with advanced training features',
    },
  ];

  const getStatusBadge = (status: Product['status']) => {
    switch (status) {
      case 'available':
        return (
          <Badge variant="default" className="bg-primary">
            Available Now
          </Badge>
        );
      case 'pre_order':
        return (
          <Badge variant="secondary" className="bg-orange-500">
            Pre-Order
          </Badge>
        );
      case 'coming_soon':
        return <Badge variant="outline">Coming Soon</Badge>;
    }
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      month: 'long',
      day: 'numeric',
      year: 'numeric',
    });
  };

  const toggleNotify = (id: number) => {
    setNotifyProducts((prev) =>
      prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id]
    );
  };

  return (
    <div className="mx-auto w-full max-w-3xl p-6">
      <div className="space-y-8">
        {products.map((product) => (
          <div key={product.id} className="relative flex items-stretch gap-8">
            {/* Timeline Line */}
            <div className="absolute inset-0 flex justify-center">
              <div className="bg-border w-px" />
            </div>

            {/* Timeline Content */}
            <div className="bg-background relative flex flex-1 gap-8 rounded-xl border p-6">
              {/* Date Marker */}
              <div className="bg-primary text-primary-foreground absolute top-8 -left-3 flex h-6 w-6 items-center justify-center rounded-full">
                <Clock className="h-3 w-3" />
              </div>

              {/* Product Image */}
              <div className="bg-muted relative h-32 w-32 shrink-0 overflow-hidden rounded-lg">
                <img
                  src={product.image}
                  alt={product.name}
                  className="object-cover"
                  sizes="128px"
                />
              </div>

              {/* Product Info */}
              <div className="min-w-0 flex-1">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <h3 className="font-medium">{product.name}</h3>
                    <div className="text-muted-foreground mt-1 text-sm">
                      Release Date: {formatDate(product.releaseDate)}
                    </div>
                  </div>
                  <div>{getStatusBadge(product.status)}</div>
                </div>

                <p className="text-muted-foreground mt-2 text-sm">
                  {product.description}
                </p>

                <div className="mt-4 flex items-center gap-4">
                  <div className="text-lg font-medium">${product.price}</div>
                  {product.rating && (
                    <div className="flex items-center gap-1">
                      <Star className="fill-primary text-primary h-4 w-4" />
                      <span>{product.rating}</span>
                      <span className="text-muted-foreground text-sm">
                        ({product.reviews} reviews)
                      </span>
                    </div>
                  )}
                </div>

                <div className="mt-4 flex items-center gap-3">
                  {product.status === 'available' ? (
                    <Button className="w-full sm:w-auto">Add to Cart</Button>
                  ) : (
                    <Button
                      variant={
                        notifyProducts.includes(product.id)
                          ? 'default'
                          : 'outline'
                      }
                      className="w-full sm:w-auto"
                      onClick={() => toggleNotify(product.id)}
                    >
                      <Bell className="mr-2 h-4 w-4" />
                      {notifyProducts.includes(product.id)
                        ? 'Notification Set'
                        : 'Notify Me'}
                    </Button>
                  )}
                  {product.estimatedShipping && (
                    <span className="text-muted-foreground text-sm">
                      {product.estimatedShipping}
                    </span>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

About this block

Timeline List arranges products along a vertical rail, with each entry hanging off a filled clock-icon dot on the left edge. Inside each card you get a square product thumbnail, a product name with its release date beneath it, a status badge (Available Now, Pre-Order, or Coming Soon), a short description, a price and an optional star rating with review count, and a primary action button. Available items show an Add to Cart button; items that are not yet released show a Notify Me toggle that switches to "Notification Set" once pressed and ships an estimated shipping note beside it when one is provided.

The three demo entries are independent of each other and the rail connects them visually without coupling them structurally. You can swap in any number of products, change every text field, drop the rating row on entries that have none, or remove the shipping note entirely. The status badge logic covers the three states in the demo, so you can use any combination of them across your entries.

When to use

Reach for this block when your storefront wants to frame products as a rolling schedule rather than a flat grid. It works well on a new arrivals feed, a seasonal drop calendar, or a limited-edition release page where the date attached to each product is part of the story. The status badge and notify toggle make it especially practical for brands that mix in-stock items with upcoming releases on the same page, something a flat grid or table cannot communicate as cleanly.

A natural flow around it on an Ecommerce page:

Before

A Promo Section to open the page with a seasonal banner or sale headline before the drop list begins
A Category Preview to orient shoppers to the range before they scroll the release schedule

After

Customer Reviews so shoppers can read social proof immediately after spotting an item
A Trust Guarantee section to reinforce confidence for pre-order and coming-soon items

What you can display

The obvious fit is a rolling product drop calendar, newest arrivals first, each with a release date and a status. A few other ways to use the frame:

A limited-edition launch schedule. List upcoming drops in order with a Coming Soon badge and a Notify Me button so shoppers can opt in before the item goes live.
A seasonal collection reveal. Walk shoppers through the season's pieces in curated order, pairing each with a short story and its available date.
A restock tracker. Show previously sold-out items returning to stock with release dates, pre-order buttons, and estimated shipping windows.

Tip: keep the description to one short sentence per product so the rail stays easy to scan as the list grows.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

A Promo Section to open the page with a seasonal banner or sale headline before the drop list begins
A Category Preview to orient shoppers to the range before they scroll the release schedule

After

Customer Reviews so shoppers can read social proof immediately after spotting an item
A Trust Guarantee section to reinforce confidence for pre-order and coming-soon items

What you can display

The obvious fit is a rolling product drop calendar, newest arrivals first, each with a release date and a status. A few other ways to use the frame:

A limited-edition launch schedule. List upcoming drops in order with a Coming Soon badge and a Notify Me button so shoppers can opt in before the item goes live.
A seasonal collection reveal. Walk shoppers through the season's pieces in curated order, pairing each with a short story and its available date.
A restock tracker. Show previously sold-out items returning to stock with release dates, pre-order buttons, and estimated shipping windows.

Tip: keep the description to one short sentence per product so the rail stays easy to scan as the list grows.

Timeline List

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display