Skincare Product Shelf

Component 13

About

A shoppable skincare wall that turns into a full product page. Twelve photoreal cosmetics, drawn entirely in SVG with glossy reflections, ridged caps and see-through glass, sit on floating shelves. Click one and it glides off the shelf, turns as its label wraps around the bottle,

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Skincare Product Shelf to your project and fits it to your theme.

Code

How Skincare Product Shelf is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ProductShelf } from "@/components/ui/skincare-product-shelf";

export default function ProductShelfDemo() {
  return (
    <ProductShelf>
      <p className="fixed right-5 bottom-4 z-40 m-0 text-[12px] text-[#6e6e73]">
        by{" "}
        <a
          href="https://aakashmehra.com/ref/productshelf"
          target="_blank"
          rel="noopener noreferrer"
          className="text-[#1d1d1f] underline-offset-4 hover:underline"
        >
          aakashmehra.com
        </a>
      </p>
    </ProductShelf>
  );
}