SwiftUI Shapes, Chat & Real-Time

Dynamic chat message speech bubbles and pulsing 3-dot typing indicators. (2 components available in Compot).

Download in App Store

1 of 2Pro ComponentiOS 16.0+

Message Bubble Basic

Chat speech bubble with tail shape, dynamic color by sender, and timestamp.

View Component & Details

MessageBubbleBasic.swiftPro

Unlock in App

import SwiftUI

struct UseMessageBubbleBasic: View {
    
    var body: some View {
        VStack {
            MessageBubbleBasic(msgDateTime: Date.now, msgText: "Ahoy, know Compot?", isMsgFromUser: false)
            MessageBubbleBasic(msgDateTime: Date.now, msgText: "Yeah, crazy, right! What's your favorite component?", isMsgFromUser: true)

        // ...
        // 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 2Free ComponentiOS 16.0+

Typing Indicator

Animated 3-dot pulsing typing indicator for chat and AI conversations.

View Component & Details

TypingIndicator.swift

import SwiftUI

struct TypingIndicator: View {
    
    let delay: Double = 0.3
    @State private var isAnimating = false
    let pointSize: CGFloat = 10
    let pointSpacing: CGFloat = 4
    let accentColor: Color = .blue
    
    var body: some View {
        HStack(spacing: pointSpacing) {
            ForEach(0..<3) { index in
                Circle()
                    .frame(width: pointSize, height: pointSize)
                    .foregroundStyle(accentColor)
                    .scaleEffect(isAnimating ? 1 : 0.6)
                    .animation(.easeInOut(duration: 0.6).repeatForever(autoreverses: true).delay(delay * Double(index)), value: isAnimating)
            }
        }
        .padding()
        .background(accentColor.opacity(0.3), in: Capsule())
        .onAppear {
            isAnimating = true
        }
    }
}

#Preview {
    TypingIndicator()
}

SwiftUI Shapes, Chat & Real-Time

Message Bubble Basic

Unlock full code & interactive preview

Typing Indicator

Explore other SwiftUI categories