Skip to content
Mini Player preview
Rendered from the SwiftUI source on this page.

Mini Player

From syxUI — written for both platforms, not translated between them.

A compact bottom mini-player bar.

Cards · SwiftUI · iOS 17

  • cards
  • swiftui

The actual source

MiniPlayerBar.swift
// Mini Player · syxUI · https://syxui.dev/components/media2-mini-player
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

// Mini player bar
struct MiniPlayerBar: View {
    var body: some View {
        HStack(spacing: 12) {
            Image("photo_food").resizable().scaledToFill().frame(width: 44, height: 44).clipShape(RoundedRectangle(cornerRadius: 8))
            VStack(alignment: .leading, spacing: 2) { Text("Sunset Lover").font(.system(size: 14, weight: .semibold)).foregroundStyle(.white); Text("Petit Biscuit").font(.system(size: 12)).foregroundStyle(.white.opacity(0.6)) }
            Spacer()
            Image(systemName: "play.fill").font(.system(size: 18)).foregroundStyle(.white)
            Image(systemName: "forward.fill").font(.system(size: 16)).foregroundStyle(.white.opacity(0.8))
        }.padding(.horizontal, 12).padding(.vertical, 10).frame(width: 320).background(Color(red: 0.16, green: 0.14, blue: 0.20), in: RoundedRectangle(cornerRadius: 14, style: .continuous)).overlay(alignment: .bottom) { GeometryReader { g in Capsule().fill(.white).frame(width: g.size.width * 0.4, height: 2) }.frame(height: 2).padding(.horizontal, 3) }
    }
}
iOS 17 · 1 dependencies

Dependencies

SwiftUI
  • photo_food (image asset)

Requires iOS 17