Swift Pieces

https://swiftpieces.com/docs
Admin
Swift Pieces is a library of production-ready SwiftUI components with native motion, haptics, and...
Tokens:381,414
Snippets:2,031
Trust Score:5.1
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### 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)
}
```
Tokens:
Raw