FreeComponents

Image Thumbnail

Reusable rounded image thumbnail with same-named ColorSet fallback — perfect for product cards, avatars, and cover images

Free
Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

SWImageThumbnail is a square, rounded image tile designed for product cards, list rows, cart items, avatars, and cover headers -- anywhere a polished image preview is needed without writing bespoke loading-state UI.

Killer feature -- same-name ColorSet as fallback. The thumbnail expects your Asset Catalog to contain both an image set and a color set sharing the same name (e.g. Drink_NaiCha image + Drink_NaiCha color). Color(imageName) is rendered first as a solid background, and Image(imageName) is drawn on top with .scaledToFill(). As a result:

  • If the image asset is missing or still decoding, the tile shows the brand-appropriate tint instead of a generic gray placeholder.
  • If the image is partially transparent (e.g. a PNG with rounded edges), the tint fills the negative space.
  • Empty / WIP states ship as a colored tile, not a broken-image icon.

If only an image (no matching color) is provided, SwiftUI silently falls back to clear -- the tile still renders correctly. The ColorSet is optional polish, not a hard requirement. This effectively eliminates blank-screen flashes during image load and turns missing assets into deliberate-looking colored placeholders.

What you get

  • ✓118 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
componentdisplayimagethumbnailassetSwiftUI

Usage

// 1. Basic -- 120pt square, 18pt corner radius (defaults)
SWImageThumbnail(imageName: "Drink_NaiCha")

// 2. Compact list row thumbnail (cart rows, order rows)
HStack {
    SWImageThumbnail(imageName: item.imageName, size: 60, cornerRadius: 12)
    VStack(alignment: .leading) {
        Text(item.name)
        Text(item.price.formatted(.currency(code: "USD")))
    }
}

// 3. Large hero / detail header
SWImageThumbnail(imageName: "Drink_KaoNai", size: 240, cornerRadius: 24)

// 4. Asset Catalog setup for the ColorSet fallback
//    -- Add an image set named "Drink_NaiCha"
//    -- Add a color set named "Drink_NaiCha" (same name) with a brand-matched
//       tint that should appear during image load or when the asset is missing
//    -- Both can be edited independently and refreshed without code changes

// 5. Grid of product cards
LazyVGrid(columns: [GridItem(.adaptive(minimum: 120))], spacing: 16) {
    ForEach(products) { product in
        VStack {
            SWImageThumbnail(imageName: product.imageName)
            Text(product.name).font(.caption)
        }
    }
}

More in Components

All 21 skills in Components