Components/E-commerce/Product Card
Product Card

Product Card

NFrom Nibware

A product card with photo, rating, price and a wishlist heart.

E-commerce · 40 lines · SwiftUI · iOS 17+

The actual source

ProductCard.swift
import SwiftUI

let ecInk = Color(red: 0.11, green: 0.12, blue: 0.14)

let ecGold = Color(red: 0.98, green: 0.72, blue: 0.10)

func ecImage(_ name: String, _ w: CGFloat, _ h: CGFloat, _ r: CGFloat = 12) -> some View {
    Image(name).resizable().aspectRatio(contentMode: .fill).frame(width: w, height: h)
        .clipShape(RoundedRectangle(cornerRadius: r, style: .continuous))
}

func ecStars(_ rating: String, _ count: String) -> some View {

Images this component uses

The code references this image by name. Download and drag into your Xcode Asset Catalog, keeping the same name, and the component renders exactly like the preview. Or swap in your own.

What it needs

Self-contained SwiftUI - system materials, SF Symbols, no external dependencies. Everything it needs - tokens, sub-views, models - is carried in the copy-paste source above.