SwiftUI Cards & Content Displays

Feature cards, testimonial blockquotes, interactive product cards, and MapKit circle/polygon overlays. (8 components available in Compot).

Download in App Store

1 of 8Pro ComponentiOS 16.0+

Feature Card Basic

Clean card displaying an icon, title, and descriptive feature paragraph.

View Component & Details

FeatureCardBasic.swiftPro

Unlock in App

import SwiftUI

struct UseFeatureCardBasic: View {
    
    var body: some View {
        FeatureCardBasic(iconName: "cursorarrow.click.2", featureName: "Feature Name", featureDescription: "Description explaining why the feature is so cool.")
    }
}

        // ...
        // Complete source code available in Compot Pro on the App Store.

Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Get Compot on the App Store

Available for macOS & iOS • 85+ free components included

2 of 8Pro ComponentiOS 16.0+

Feature Card in Rounded Rectangle

Elevated feature card with subtle background container for grid layouts.

View Component & Details

FeatureCardInRoundedRectangle.swiftPro

Unlock in App

import SwiftUI

struct UseFeatureCardInRoundedRectangle: View {
    
    var body: some View {
        FeatureCardInRoundedRectangle(iconName: "cursorarrow.click.2", featureName: "Feature Name", featureDescription: "Description explaining why the feature is so cool.")
            .padding()
    }

        // ...
        // Complete source code available in Compot Pro on the App Store.

Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Get Compot on the App Store

Available for macOS & iOS • 85+ free components included

3 of 8Pro ComponentiOS 16.0+

Quote Card Fancy

Testimonial blockquote card with quotation marks, author attribution, and rating.

View Component & Details

QuoteCardFancy.swiftPro

Unlock in App

import SwiftUI

struct UseQuoteCardFancy: View {
    
    var body: some View {
        QuoteCardFancy(quote: "Stay calm and relax. Everything's gonna be alright.", author: "Unknown developer")
            .padding()
    }

        // ...
        // Complete source code available in Compot Pro on the App Store.

Compot Pro Component

Unlock full code & interactive preview

Interactive live preview and complete SwiftUI code available in the Compot App.

Get Compot on the App Store

Available for macOS & iOS • 85+ free components included

4 of 8Free ComponentiOS 16.0+

Product Card Basic Rectangle

Modern e-commerce product card with image thumbnail, price tag, and buy button.

View Component & Details

ProductCardBasicRectangle.swift

import Foundation
import SwiftUI

struct ProductCardBasicRect: View {
    let productImage: Image
    let productName: String
    let productCategory: String
    let productPrice: Double
    @Binding var isFavorite: Bool
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            image
            VStack(alignment: .leading, spacing: 2) {
                name
                category
            }
            price
        }
    }
    
    private var image: some View {
        productImage
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 160, height: 140)
            .clipped()
            .clipShape(.rect(cornerRadius: 15, style: .continuous))
            .overlay(alignment: .topTrailing) {
                favoriteButton
                    .offset(x: -10, y: 10)
            }
    }
    
    private var favoriteButton: some View {
        Button(action: {
            isFavorite.toggle()
        }) {
            /// You can download custom symbols used in this component:
            /// custom.heart.fill: https://drive.google.com/file/d/1FrubVKYkTqG61-iAA0LVv5MnjQKx1WUI/view?usp=sharing
            /// custom.heart: https://drive.google.com/file/d/1FbTd5rpydjMYCSktub2k9N7YeKVSDMVN/view?usp=sharing
            Image(isFavorite ? "custom.heart.fill" : "custom.heart")
                .font(.system(size: 20))
                .fontWeight(.regular)
                .symbolRenderingMode(.multicolor)
        }
        .buttonStyle(PlainButtonStyle())
    }
    
    private var name: some View {
        Text(productName)
            .font(.system(size: 15))
            .fontWeight(.medium)
            .lineLimit(2)
            .padding(.top, 8)
            .foregroundStyle(.primary)
    }
    
    private var category: some View {
        Text(productCategory)
            .font(.system(size: 15))
            .fontWeight(.light)
            .lineLimit(1)
            .foregroundStyle(.secondary)
    }
    
    private var price: some View {
        HStack {
            Text(productPrice, format: .currency(code: "USD"))
                .fontWeight(.medium)
            Text("night")
                .fontWeight(.light)
                .foregroundStyle(.secondary)
        }
        .font(.system(size: 14))
        .padding(.bottom, 8)
        .foregroundStyle(.primary)
    }
}

struct UseProductCardBasicRect: View {
    
    @State private var isFavorite: Bool = false
    
    var body: some View {
        ProductCardBasicRect(productImage: Image("bellavista"), productName: "Bella Vista Hotel", productCategory: "Romantic", productPrice: 199.99, isFavorite: $isFavorite)
            .padding()
    }
}

#Preview {
    UseProductCardBasicRect()
}

5 of 8Free ComponentiOS 16.0+

Rating View (Half-Star Capable)

Dynamic 5-star rating view supporting full, half, and empty star states.

View Component & Details

RatingViewHalfStarCapable.swift

import Foundation
import SwiftUI

struct RatingView: View {
    let rating: Double

    var body: some View {
        HStack(alignment: .lastTextBaseline, spacing: 3) {
            ForEach(0..<5) { index in
                if rating >= Double(index + 1) {
                    Image(systemName: "star.fill")
                        .foregroundStyle(.yellow)
                } else if rating > Double(index) && rating < Double(index + 1) {
                    Image(systemName: "star.leadinghalf.filled")
                        .foregroundStyle(.yellow)
                } else {
                    Image(systemName: "star")
                        .foregroundStyle(.gray)
                }
            }
            Text(String(format: "%.1f", rating))
                .padding(.leading, 5)
                .foregroundStyle(.secondary)
        }
    }
}

struct UseRatingView: View {
    var body: some View {
        RatingView(rating: 4.5)
    }
}

#Preview {
    UseRatingView()
}

6 of 8Free ComponentiOS 16.0+

Map with Circular Overlay

MapKit integration card displaying interactive map with circular radius boundary.

View Component & Details

MapWithCircularOverlay.swift

import SwiftUI
import MapKit

struct MapWMapCircle: View {
    
    let coordinate: CLLocationCoordinate2D
    
    var body: some View {
            Map {
                MapCircle(center: coordinate, radius: 5000)
                    .foregroundStyle(.red)
                    .stroke(.white, lineWidth: 4)
            }
            .controlSize(.extraLarge)
            .mapControlVisibility(.hidden)
            .mapStyle(.hybrid)
            .frame(width: 160, height: 160)
            .clipShape(.rect(cornerRadius: 25, style: .continuous))
            .shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2)
    }
}

struct UseMapWMapCircle: View {
    var body: some View {
        MapWMapCircle(coordinate: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194))
    }
}

#Preview {
    UseMapWMapCircle()
}