Featured List

A list spotlighting select products with large imagery, descriptions, and prices. Highlights bestsellers or promotions on a storefront landing page.

import { Button } from '@/components/ui/button';
import { Heart, Star } from 'lucide-react';

export default function FeaturedList() {
  return (
    <div className="mx-auto w-full max-w-7xl p-6">
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        {/* Featured Product */}
        <div className="group bg-card overflow-hidden rounded-xl border md:col-span-2">
          <div className="grid md:grid-cols-2">
            <div className="bg-muted relative aspect-square md:aspect-auto">
              <img
                src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
                alt="Featured product"
                className="object-cover transition-transform group-hover:scale-105"
                sizes="(max-width: 768px) 100vw, 50vw"
              />
              <div className="bg-primary text-primary-foreground absolute top-2 left-2 rounded-md px-2 py-1 text-sm font-medium">
                Featured
              </div>
              <Button
                size="icon"
                variant="ghost"
                className="bg-background/80 absolute top-2 right-2 h-8 w-8 rounded-full backdrop-blur-sm"
              >
                <Heart className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex flex-col p-6">
              <div className="flex-1">
                <h2 className="text-2xl font-semibold">
                  Premium Leather Watch
                </h2>
                <div className="mt-2 flex items-center gap-1">
                  <Star className="fill-primary text-primary h-4 w-4" />
                  <span className="font-medium">4.9</span>
                  <span className="text-muted-foreground">(128 reviews)</span>
                </div>
                <p className="text-muted-foreground mt-4">
                  Elevate your style with our premium leather watch. Featuring
                  Swiss-made movement, genuine leather strap, and sapphire
                  crystal glass.
                </p>
                <div className="mt-4 space-y-2">
                  <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-bold">$299</span>
                    <span className="text-muted-foreground line-through">
                      $399
                    </span>
                    <span className="text-sm font-medium text-green-600">
                      Save 25%
                    </span>
                  </div>
                </div>
              </div>
              <div className="mt-6 grid gap-3 sm:grid-cols-2">
                <Button size="lg">Buy Now</Button>
                <Button size="lg" variant="outline">
                  Add to Cart
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Regular Products */}
        {[...Array(4)].map((_, i) => (
          <div
            key={i}
            className="group bg-card overflow-hidden rounded-xl border"
          >
            <div className="bg-muted relative aspect-square">
              <img
                src="https://images.unsplash.com/photo-1523275335684-37898b6baf30"
                alt="Product image"
                className="object-cover transition-transform group-hover:scale-105"
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
              />
              <Button
                size="icon"
                variant="ghost"
                className="bg-background/80 absolute top-2 right-2 h-8 w-8 rounded-full opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100"
              >
                <Heart className="h-4 w-4" />
              </Button>
            </div>
            <div className="p-4">
              <div className="flex items-center justify-between gap-4">
                <div className="min-w-0">
                  <h3 className="truncate font-medium">
                    Classic Leather Watch
                  </h3>
                  <div className="mt-1 flex items-center gap-1">
                    <Star className="fill-primary text-primary h-3.5 w-3.5" />
                    <span className="text-sm">4.9</span>
                    <span className="text-muted-foreground text-sm">(128)</span>
                  </div>
                </div>
                <div className="text-right">
                  <div className="font-medium">$299</div>
                  <div className="text-muted-foreground text-sm line-through">
                    $399
                  </div>
                </div>
              </div>
              <div className="mt-4 grid grid-cols-2 gap-2">
                <Button size="sm">Buy Now</Button>
                <Button size="sm" variant="outline">
                  Add to Cart
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

About this block

Featured List is a two-tier product grid. At the top sits a full-width hero card that splits into two halves: a large square image on the left and a content panel on the right with the product name, a star rating with review count, a description, a strikethrough original price next to the current price and a savings callout, and two side-by-side action buttons. A "Featured" badge pins to the top-left corner of the image. Below that, four equal cards fill a two-column grid, each showing a square product photo, a title and star rating, a price pair, and the same pair of action buttons in a compact form.

The hero card and the secondary cards are independent. You can rewrite all copy, swap the images, change the product count, or remove the savings callout without affecting the rest of the layout. The heart icon on each card is already wired up as a button, so adding wishlist behavior requires no structural change.

When to use

Reach for this block when you want to push one item hard while still giving shoppers a quick path to related picks. It suits a workspace tools storefront landing page where one flagship plan or add-on deserves prominence and the secondary slots carry companion items. It works better than a uniform grid when the hero item has a story to tell, and better than a single product overview when you also need the browsing momentum that a row of secondary cards provides.

A natural flow around it on an Ecommerce page:

Before

A Promo Sections block to set a seasonal or campaign context before the products appear
A Category Filters bar so shoppers can scope the list before they see it

After

Customer Reviews to reinforce the hero product's rating with full testimonials
A Cross Sells row to extend the session after a shopper considers the featured item

What you can display

The most common use is a promoted product paired with related items in the same category. A few other ways to use the frame:

A flagship plan or add-on. Put your highest-margin workspace tool in the hero slot and surface four companion plans below it.
A sale or limited offer. The price pair and savings badge in the hero panel communicate a time-bound discount without extra markup.
New arrivals with a spotlight. Feature the newest release at full width and use the secondary grid for the rest of the recent drops.

Tip: keep the hero description to two or three sentences so the content panel stays balanced with the image on wider screens.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

A Promo Sections block to set a seasonal or campaign context before the products appear
A Category Filters bar so shoppers can scope the list before they see it

After

Customer Reviews to reinforce the hero product's rating with full testimonials
A Cross Sells row to extend the session after a shopper considers the featured item

What you can display

The most common use is a promoted product paired with related items in the same category. A few other ways to use the frame:

A flagship plan or add-on. Put your highest-margin workspace tool in the hero slot and surface four companion plans below it.
A sale or limited offer. The price pair and savings badge in the hero panel communicate a time-bound discount without extra markup.
New arrivals with a spotlight. Feature the newest release at full width and use the secondary grid for the rest of the recent drops.

Tip: keep the hero description to two or three sentences so the content panel stays balanced with the image on wider screens.

Featured 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