
Achievement Card
From syxUI — written for both platforms, not translated between them.
An unlocked-achievement card with a trophy and a streak.
Cards · SwiftUI · iOS 17
- cards
- swiftui
The actual source
AchievementCard.swift
// Achievement Card · syxUI · https://syxui.dev/components/card-achievement
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
extension View {
func formaCard(_ pad: CGFloat = 18) -> some View {
self.padding(pad)
.background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
.overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
.shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
}
}
// Achievement card
struct AchievementCard: View {
let gold = Color(red: 0.98, green: 0.72, blue: 0.10)
var body: some View {
VStack(spacing: 10) {
Image(systemName: "trophy.fill").font(.system(size: 28)).foregroundStyle(gold)
.frame(width: 64, height: 64).background(gold.opacity(0.14), in: Circle())
VStack(spacing: 3) {
Text("7-Day Streak!").font(.system(size: 17, weight: .bold))
Text("You've hit your goal all week").font(.system(size: 13)).foregroundStyle(.secondary).multilineTextAlignment(.center)
}
}.formaCard().frame(width: 220)
}
}
iOS 17 · No dependencies
Dependencies
- SwiftUI
- No external dependencies
Requires iOS 17


