### Floating Dock Example State Source: https://swiftpieces.com/docs/components/navigation/floating-dock Initial state setup for the FloatingDockExample view. ```swift private struct FloatingDockExample: View { @State private var selection = 0 @State private var inbox = 3 ``` -------------------------------- ### Request a piece installation Source: https://swiftpieces.com/docs/mcp Use this prompt in your agent session to install a specific piece from the library. ```text Add the Swift Pieces "Assistant Orb" piece to my app ``` -------------------------------- ### Story Strip Example Implementation Source: https://swiftpieces.com/docs/components/media/story-strip A concrete example of the StoryStrip component showing data structure and state initialization. ```swift // MARK: - Example /// A friend's Saturday market story: each segment is a solid block with one big idea, and the strip runs in dark ink. private struct StoryStripExample: View { private struct Slide { let meta: String let headline: String let figure: String? let fill: Color } @Environment(\.colorScheme) private var colorScheme @State private var current = 0 private let ink = Color(red: 0.078, green: 0.078, blue: 0.078) private let slides = [ Slide(meta: "SATURDAY MARKET", headline: "Out early for the good peaches", figure: nil, fill: Color(red: 1, green: 0, blue: 0)), Slide(meta: "STALLS VISITED", headline: "and one very long queue", figure: "12", fill: Color(red: 1, green: 0.851, blue: 0.463)), Slide(meta: "SPENT", headline: "on bread, figs and flowers", figure: "€18.40", fill: Color(red: 0.663, green: 0.863, blue: 0.718)), Slide(meta: "NEXT WEEK", headline: "Same time. Bring a bigger bag.", figure: nil, fill: Color(red: 0.804, green: 0.722, blue: 1)) ] ``` -------------------------------- ### FanStack Example View Source: https://swiftpieces.com/docs/components/controls/fan-stack Example usage of FanStack with a list of names, size, max, and style. Includes light and dark previews. ```swift // MARK: - Example /// Just the stack, on the ground the cut-out ring is matched to. private struct FanStackExample: View { private typealias House = FanStack.Style.House private static let ground = House.adaptive(light: 0xF3F2EE, dark: 0x121212) var body: some View { FanStack( names: ["Priya Raman", "Jonas Weber", "Amara Diallo", "Leo Brandt", "Sofia Marin", "Kenji Sato"], size: 52, max: 3, style: .init(ring: Self.ground) ) .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Self.ground) } } #Preview("Light") { FanStackExample().preferredColorScheme(.light) } #Preview("Dark") { FanStackExample().preferredColorScheme(.dark) } ``` -------------------------------- ### Toast Example View with Auto-Dismiss Source: https://swiftpieces.com/docs/components/sheets/toast A preview example that shows a toast with a success style, a 4-second duration, and an Undo action, repeatedly presenting it every 0.6 seconds. ```swift // MARK: - Example /// The toast alone on the ground: it arrives, drains its timer, dismisses, and returns. private struct ToastExample: View { @State private var shown = false var body: some View { Color.clear .frame(maxWidth: .infinity, maxHeight: .infinity) .background(adaptive(light: 0xF3F2EE, dark: 0x121212)) .toast(isPresented: $shown, message: "Conversation archived", detail: "Mira Reyes · Invoice 2291", style: .success, duration: 4, action: .init("Undo") {}) .task { while !Task.isCancelled { try? await Task.sleep(for: .seconds(0.6)) shown = true try? await Task.sleep(for: .seconds(4.6)) } } } } ``` -------------------------------- ### Install SwiftUI pieces with npx swiftpieces add Source: https://swiftpieces.com/docs/guides/swiftui-haptics Run from the folder containing your .xcodeproj to install the specified SwiftUI pieces. Each piece is a single Swift file built on Apple frameworks only. ```bash npx swiftpieces add TimerDial HoldToConfirm ScrubStepper ``` -------------------------------- ### TouchGrid Example Usage Source: https://swiftpieces.com/docs/components/backgrounds/touch-grid Creates a TouchGrid instance with the default style and applies a light color scheme. This is the minimal usage example. ```swift TouchGridExample().preferredColorScheme(.light) ``` -------------------------------- ### LiveStat usage example Source: https://swiftpieces.com/docs/components/data/live-stat Shows how to instantiate LiveStat with a preferred color scheme. The example uses the default initializer and applies the .light color scheme. ```swift LiveStatExample().preferredColorScheme(.light) ``` -------------------------------- ### Install cards with npx swiftpieces add Source: https://swiftpieces.com/docs/guides/swiftui-cards Run from the folder containing your .xcodeproj to install the SwipeDeck, FlipCard, and MotionCard Swift files into your project. Each card is a single Swift file using only Apple frameworks. ```bash npx swiftpieces add SwipeDeck FlipCard MotionCard ``` -------------------------------- ### Initialize SwiftPieces with npx swiftpieces init Source: https://swiftpieces.com Initializes SwiftPieces in your project. Run this command to install the library and make the components available. ```bash $npx swiftpieces init ``` -------------------------------- ### Usage Example Source: https://swiftpieces.com/docs/components/inputs/secure-entry Initializes a SecureEntry view with default settings. ```swift SecureEntryExample() ``` -------------------------------- ### Odometer example with loading, deposit, and payment rolls Source: https://swiftpieces.com/docs/components/data/odometer Example view that drives the odometer: starts with a loading state, then after 1 second shows a deposit of 517 and later a payment of 1,450. Includes light and dark previews using the adaptive background. ```swift private struct OdometerExample: View { @State private var balance: Double = 12_480.55 @State private var loading = true var body: some View { Odometer(value: balance, format: .currency(code: "USD"), isLoading: loading, ticksOnSettle: true) .font(.system(size: 48, weight: .light)) .padding(24) .frame(maxWidth: .infinity, maxHeight: .infinity) .background(OdometerStyle.adaptive(0xF3F2EE, 0x121212)) // Drives the piece's own states: dashes while loading, then a deposit and a payment roll the digits. .task { try? await Task.sleep(for: .seconds(1)) loading = false try? await Task.sleep(for: .seconds(2.4)) balance += 517 try? await Task.sleep(for: .seconds(2.4)) balance -= 1_450 } } } #Preview("Light") { OdometerExample().preferredColorScheme(.light) } #Preview("Dark") { OdometerExample().preferredColorScheme(.dark) } ``` -------------------------------- ### CLI Commands Source: https://swiftpieces.com/docs/cli Lists the available CLI commands for initializing, adding, listing, and logging in. The `add` command fetches pieces from the free registry by default, while `--pro` targets the Pro registry. The `login` command stores your license key in `~/.swiftpieces/auth.json`. ```bash npx swiftpieces init # optional: add does this on first run npx swiftpieces add GlassSurface # free piece npx swiftpieces add subscription-app # Pro template, needs a license npx swiftpieces add Silk --overwrite npx swiftpieces list # free registry npx swiftpieces list --pro # Pro registry (metadata is public) npx swiftpieces login sp_live_... # store your key in ~/.swiftpieces/auth.json npx swiftpieces whoami # check whether your key has Pro access ``` -------------------------------- ### Usage: Apply GlassSurfaceExample with preferredColorScheme Source: https://swiftpieces.com/docs/components/glass/glass-surface Shows the minimal usage of the glass surface modifier in a SwiftUI view. The example applies the preferred color scheme to the view, which is a common setup for demonstrating the glass effect. ```swift GlassSurfaceExample() .preferredColorScheme(.light) ``` -------------------------------- ### Instantiate PromptChips example with light color scheme Source: https://swiftpieces.com/docs/components/ai/prompt-chips Instantiates the PromptChips example view and forces the light color scheme. Use this in a SwiftUI preview or app entry point to see the component in light mode. ```swift PromptChipsExample().preferredColorScheme(.light) ``` -------------------------------- ### StreamingReplyExample previews Source: https://swiftpieces.com/docs/components/ai/streaming-reply Previews the example in light and dark color schemes. ```swift #Preview("Light") { StreamingReplyExample().preferredColorScheme(.light) } #Preview("Dark") { StreamingReplyExample().preferredColorScheme(.dark) } ``` -------------------------------- ### Usage Example: GlassActionMenuExample Source: https://swiftpieces.com/docs/components/glass/glass-action-menu Initializes the GlassActionMenu with a light color scheme. This is the minimal usage example for the component. ```swift GlassActionMenuExample() .preferredColorScheme(.light) ``` -------------------------------- ### SwipeDeck Usage Example Source: https://swiftpieces.com/docs/components/cards/swipe-deck Initializes a SwipeDeck with a light color scheme. This is the minimal usage example for the component. ```swift SwipeDeckExample() .preferredColorScheme(.light) ``` -------------------------------- ### RatingScrub example view Source: https://swiftpieces.com/docs/components/feedback/rating-scrub Example view that demonstrates the RatingScrub component with a default rating of 4.0 and custom labels. ```swift /// The rating itself: five stars with the numeral and label chip it renders under them. private struct RatingScrubExample: View { @State private var rating = 4.0 var body: some View { RatingScrub(rating: $rating, labels: ["Poor", "Fair", "Good", "Very good", "Great"], size: 46) .frame(maxWidth: .infinity, maxHeight: .infinity) .background(RatingScrub.Style.adaptive(0xF3F2EE, 0x121212)) } } ``` -------------------------------- ### Install via npx Source: https://swiftpieces.com/docs/components/text/glass-text Command to install the Glass Text component using npx. Run from the folder containing your .xcodeproj. ```bash $npx swiftpieces add GlassText ``` -------------------------------- ### Permission Sheet Example View Source: https://swiftpieces.com/docs/components/sheets/permission-sheet An example view that presents the permission sheet over a plain ground, with a state to control its presentation. ```swift private struct PermissionSheetExample: View { @State private var showing = true } ``` -------------------------------- ### Install HoldToConfirm with npx Source: https://swiftpieces.com/docs/components/controls/hold-to-confirm Run this command from the folder that contains your .xcodeproj to add the HoldToConfirm piece to your app. The files land inside your app. ```bash $npx swiftpieces add HoldToConfirm ``` -------------------------------- ### Usage: SwipeActionRowExample().preferredColorScheme(.light) Source: https://swiftpieces.com/docs/components/lists/swipe-action-row Initializes the SwipeActionRow example with a light color scheme. This is the minimal usage example for the component. ```swift SwipeActionRowExample().preferredColorScheme(.light) ``` -------------------------------- ### Use SilkExample with preferredColorScheme(.light) Source: https://swiftpieces.com/docs/components/backgrounds/silk Shows how to instantiate the Silk view and force the light color scheme, which is useful when you want the fabric to render in its light appearance regardless of the system setting. ```swift SilkExample().preferredColorScheme(.light) ``` -------------------------------- ### Install Swift Pieces with CLI Source: https://swiftpieces.com/docs/guides/swiftui-animations Use the npx swiftpieces add command to add a piece to your project. Each piece is a single Swift file with no dependencies. ```bash npx swiftpieces add SwipeDeck npx swiftpieces add Odometer ``` -------------------------------- ### Instantiate TrackingTabsExample with light color scheme Source: https://swiftpieces.com/docs/components/navigation/tracking-tabs Instantiates the TrackingTabs example view and forces the light color scheme. Use this to preview the component in a fixed appearance. ```swift TrackingTabsExample().preferredColorScheme(.light) ``` -------------------------------- ### Usage: Instantiate ExpandableTextExample Source: https://swiftpieces.com/docs/components/text/expandable-text Shows how to create an instance of the ExpandableText component. This is the basic usage example from the 'Usage' section. ```swift ExpandableTextExample() ``` -------------------------------- ### Usage: StretchHeaderExample().preferredColorScheme(.light) Source: https://swiftpieces.com/docs/components/navigation/stretch-header Use this snippet to present the StretchHeader example in a light color scheme. It is the minimal usage example from the documentation. ```swift StretchHeaderExample().preferredColorScheme(.light) ``` -------------------------------- ### Instantiate ScrubChartExample with light color scheme Source: https://swiftpieces.com/docs/components/data/scrub-chart Instantiates the example view and forces the light color scheme. Use this when previewing or presenting ScrubChart in a light appearance. ```swift ScrubChartExample().preferredColorScheme(.light) ``` -------------------------------- ### GlassActionMenuExample - Example view with auto-expand/collapse Source: https://swiftpieces.com/docs/components/glass/glass-action-menu An example view that places the GlassActionMenu in the corner of the stage and automatically expands and collapses it in a loop using a task. ```swift // MARK: - Example /// The component alone: the trigger in the corner of the stage, the arc expanding into empty ground. private struct GlassActionMenuExample: View { @State private var expanded = false var body: some View { GlassActionMenu(items: [ .init(symbol: "square.and.pencil", label: "Note", tint: GlassActionMenuPalette.butter) {}, .init(symbol: "mic.fill", label: "Voice memo", tint: GlassActionMenuPalette.lilac) {}, .init(symbol: "camera.fill", label: "Photo", tint: GlassActionMenuPalette.sky) {}, ], arrangement: .arc, isExpanded: $expanded) .padding(28) .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing) .background(GlassActionMenuPalette.ground) .task { while !Task.isCancelled { try? await Task.sleep(for: .seconds(1.2)) expanded = true try? await Task.sleep(for: .seconds(2.8)) expanded = false } } } } ``` -------------------------------- ### Light and dark previews for DepthCarousel example Source: https://swiftpieces.com/docs/components/lists/depth-carousel SwiftUI previews for the DepthCarousel example, forcing light and dark color schemes to show both appearances. ```swift #Preview("Light") { DepthCarouselExample().preferredColorScheme(.light) } #Preview("Dark") { DepthCarouselExample().preferredColorScheme(.dark) } ``` -------------------------------- ### Display PromptChips example with light and dark previews Source: https://swiftpieces.com/docs/components/ai/prompt-chips Shows a `PromptChips` row with sample prompts and SF Symbols. The row collapses after selection and rebuilds after a 1-second delay to loop the example. Includes light and dark previews. ```swift // MARK: - Example /// The chip row alone: choose one and it morphs to row width, then hands the text back and collapses. private struct PromptChipsExample: View { @State private var cycle = 0 var body: some View { PromptChips( ["Summarize this page", "Draft a reply to Mara", "Find action items", "Plan my week"], symbols: ["text.alignleft", "arrowshape.turn.up.left", "checklist", "calendar"] ) { _ in // The row collapses once it lands; rebuild it so the example loops. Task { try? await Task.sleep(for: .seconds(1)) cycle += 1 } } .id(cycle) .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color(UIColor { $0.userInterfaceStyle == .dark ? UIColor(red: 0.071, green: 0.071, blue: 0.071, alpha: 1) : UIColor(red: 0.953, green: 0.949, blue: 0.933, alpha: 1) })) } } #Preview("Light") { PromptChipsExample().preferredColorScheme(.light) } #Preview("Dark") { PromptChipsExample().preferredColorScheme(.dark) } ```