# E-commerce 8

> E-commerce 8 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-e-commerce-8).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-e-commerce-8
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-e-commerce-8-light-d546e7a8b6596883.png
- Registry item: https://uiable.com/r/block-e-commerce-8.json
- Categories: e-commerce
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-e-commerce-8.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: `lucide-react`
- Registry items: `@uiable/button`

## Files

### `src/components/uiable/blocks/e-commerce/e-commerce-8/e-commerce-8.tsx`

```tsx
// shadcn
import { Button } from "@/components/ui/button"

// assets
import { DollarSign } from "lucide-react"

//  ------------------------------ | E - COMMERCE 8 | ------------------------------  //

export default function Ecommerce8() {
  return (
    <div className="bg-slate-900 py-24 sm:py-32">
      <div className="container mx-auto px-6 lg:px-8">
        <div className="flex flex-col gap-8">
          <div className="mx-auto flex max-w-150 flex-col items-center gap-2 text-center sm:gap-4">
            <div className="flex flex-col gap-1 sm:gap-2">
              <span className="text-sm font-medium tracking-wider text-sky-500 uppercase">
                Featured Products
              </span>
              <h2 className="text-lg font-medium text-slate-100 sm:text-2xl">
                Explore Our Best Selling Collection
              </h2>
            </div>
            <p className="max-w-190 text-slate-300">
              Discover premium products carefully selected for quality, style,
              and everyday convenience. Shop our featured collection at great
              prices.
            </p>
          </div>
          <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12 lg:col-span-6">
              <div className="group relative overflow-hidden rounded-lg bg-card p-4">
                <div className="absolute inset-0 z-10 bg-pink-500"></div>
                <div className="absolute inset-0 z-20 bg-card/80"></div>
                <div className="relative z-30 flex flex-col gap-6">
                  <img
                    src="https://cdn.uiable.com/block/img-ecom-prod-1.png"
                    alt="Pink Blossom Plant"
                    className="mx-auto w-full lg:w-3/4"
                  />
                  <div className="rounded-lg bg-card/70 p-5">
                    <div className="flex flex-col gap-3 sm:flex-row md:items-end">
                      <div className="flex grow flex-col gap-3">
                        <h4 className="line-clamp-1 font-medium text-slate-900 dark:text-slate-100">
                          Pink Blossom Plant
                        </h4>
                        <p className="line-clamp-3 text-base text-slate-700 dark:text-slate-300">
                          A beautiful indoor flowering plant that adds freshness
                          and elegance to any space.
                        </p>
                        <p className="flex items-center gap-1 text-lg font-semibold text-slate-900 md:text-3xl dark:text-slate-100">
                          <DollarSign className="size-3.5 text-slate-500 md:size-6" />
                          140
                        </p>
                      </div>
                      <Button
                        size="lg"
                        className="shrink-0 rounded-full bg-pink-500 text-white hover:translate-y-1 hover:opacity-90"
                      >
                        Buy Now
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-span-12 lg:col-span-6">
              <div className="flex flex-col gap-6">
                <div className="flex flex-row gap-6">
                  <div className="group relative overflow-hidden rounded-lg bg-card p-4">
                    <div className="absolute inset-0 z-10 bg-yellow-500"></div>
                    <div className="absolute inset-0 z-20 bg-card/80"></div>
                    <div className="relative z-30 flex flex-col gap-6 md:flex-row">
                      <img
                        src="https://cdn.uiable.com/block/img-ecom-prod-2.png"
                        alt="Premium Bomber Jacket"
                        className="w-full shrink-0 md:w-5/12"
                      />
                      <div className="grow rounded-lg bg-card/70 p-5">
                        <div className="flex h-full flex-col justify-between gap-3">
                          <h4 className="line-clamp-1 font-medium text-slate-900 dark:text-slate-100">
                            Premium Bomber Jacket
                          </h4>
                          <p className="line-clamp-3 text-base text-slate-700 dark:text-slate-300">
                            Stylish and comfortable bomber jacket crafted with
                            premium materials for everyday wear.
                          </p>
                          <p className="flex items-center gap-1 text-lg font-semibold text-slate-900 md:text-3xl dark:text-slate-100">
                            <DollarSign className="size-3.5 text-slate-500 md:size-6" />
                            180
                          </p>
                          <div className="grid">
                            <Button
                              size="lg"
                              className="rounded-full bg-yellow-500 text-white hover:translate-y-1 hover:opacity-90"
                            >
                              Buy Now
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="grid grid-cols-12 gap-6">
                  <div className="col-span-12 md:col-span-6">
                    <div className="group relative overflow-hidden rounded-lg bg-card p-4">
                      <div className="absolute inset-0 z-10 bg-purple-500"></div>
                      <div className="absolute inset-0 z-20 bg-card/80"></div>
                      <div className="relative z-30 flex flex-col gap-6">
                        <img
                          src="https://cdn.uiable.com/block/img-ecom-prod-3.png"
                          alt="Travel Suitcase"
                          className="mx-auto w-full lg:w-2/4"
                        />
                        <div className="rounded-lg bg-card/70 p-5">
                          <div className="flex flex-col gap-3">
                            <h4 className="line-clamp-1 font-medium text-slate-900 dark:text-slate-100">
                              Travel Suitcase
                            </h4>
                            <p className="flex items-center gap-1 text-lg font-semibold text-slate-900 md:text-3xl dark:text-slate-100">
                              <DollarSign className="size-3.5 text-slate-500 md:size-6" />
                              300
                            </p>
                            <div className="grid">
                              <Button
                                size="lg"
                                className="rounded-full bg-purple-500 text-white hover:translate-y-1 hover:opacity-90"
                              >
                                Buy Now
                              </Button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="col-span-12 md:col-span-6">
                    <div className="group relative overflow-hidden rounded-lg bg-card p-4">
                      <div className="absolute inset-0 z-10 bg-green-500"></div>
                      <div className="absolute inset-0 z-20 bg-card/80"></div>
                      <div className="relative z-30 flex flex-col gap-6">
                        <img
                          src="https://cdn.uiable.com/block/img-ecom-prod-4.png"
                          alt="Ceramic Coffee Mug"
                          className="mx-auto w-full lg:w-2/4"
                        />
                        <div className="rounded-lg bg-card/70 p-5">
                          <div className="flex flex-col gap-3">
                            <h4 className="line-clamp-1 font-medium text-slate-900 dark:text-slate-100">
                              Ceramic Coffee Mug
                            </h4>
                            <p className="flex items-center gap-1 text-lg font-semibold text-slate-900 md:text-3xl dark:text-slate-100">
                              <DollarSign className="size-3.5 text-slate-500 md:size-6" />
                              140
                            </p>
                            <div className="grid">
                              <Button
                                size="lg"
                                className="rounded-full bg-green-500 text-white hover:translate-y-1 hover:opacity-90"
                              >
                                Buy Now
                              </Button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
```