FreeComponents

Order Customization View

Animated drink customization demo with flavor selection, cup sizing, matchedGeometryEffect, and quantity control

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

Animated drink customization demo page showcasing SwiftUI animation capabilities: flavor selection, cup size switching, gradient background animation, matchedGeometryEffect selector, and cup scale/offset animation. Can be used as a reference template for product customization pages. Includes sub-components: SWCupView, SWOrderSelector, SWQuantityControl, and SWOrderButton.

Note: This component references image resources (.matcha, .chocolate, .latte) from the asset catalog. Replace these with your own image resources.

What you get

  • ✓253 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
componentdisplayorderanimationmatchedGeometryEffectSwiftUI

Usage

// Present the view directly (includes built-in gradient background)
SWOrderView()

// Reuse sub-components independently:
// Capsule-shaped selector with matchedGeometryEffect
SWOrderSelector(items: ["S", "M", "L"], sel: $size, ns: sizeNS, label: "Size")

// +/- stepper with numeric text transition
SWQuantityControl(qty: $qty)

More in Components

All 21 skills in Components