Quick Start
Get up and running with LuxeUI in under 2 minutes:
import SwiftUI
import LuxeUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.luxeTheme(.midnight)
}
}
}
struct ContentView: View {
var body: some View {
ZStack {
MeshGradientBackground(colors: [.purple, .blue, .pink])
LuxeCard {
VStack(spacing: 16) {
Image(systemName: "sparkles")
.font(.system(size: 50))
Text("Welcome to LuxeUI")
.font(.title2.bold())
LuxeButton("Get Started", style: .primary) {
print("Let's go!")
}
}
.padding()
}
}
}
}Dashboard Cards
Create a modern dashboard with stat cards:
struct DashboardView: View {
var body: some View {
LazyVGrid(columns: [
GridItem(.flexible()),
GridItem(.flexible())
], spacing: 20) {
StatCard(
title: "Revenue",
value: "$12,450",
icon: "dollarsign.circle.fill",
trend: .up
)
StatCard(
title: "Users",
value: "2,340",
icon: "person.2.fill",
trend: .up
)
StatCard(
title: "Orders",
value: "186",
icon: "cart.fill",
trend: .neutral
)
StatCard(
title: "Rating",
value: "4.9",
icon: "star.fill",
trend: .up
)
}
.padding()
}
}
struct StatCard: View {
let title: String
let value: String
let icon: String
let trend: Trend
@Environment(\.luxeTheme) private var theme
var body: some View {
LuxeCard(configuration: .floating) {
VStack(alignment: .leading, spacing: 12) {
HStack {
Image(systemName: icon)
.foregroundColor(theme.primaryColor)
Spacer()
TrendBadge(trend: trend)
}
Text(value)
.font(.title.bold())
Text(title)
.font(.caption)
.foregroundColor(theme.textSecondaryColor)
}
.padding()
}
}
}Hero Section with Refractive Glass
Create a stunning hero section for your landing page:
struct HeroSection: View {
var body: some View {
ZStack {
// Animated background
MeshGradientBackground(colors: [
.purple.opacity(0.6),
.blue.opacity(0.4),
.pink.opacity(0.5)
])
// Floating orbs for depth
FloatingOrb(color: .purple, size: 200)
.offset(x: -100, y: -150)
FloatingOrb(color: .blue, size: 150)
.offset(x: 120, y: 100)
// Main content
VStack(spacing: 32) {
RefractiveGlassCard(
distortionIntensity: 0.2,
chromaticAberration: true
) {
VStack(spacing: 20) {
Image(systemName: "wand.and.stars")
.font(.system(size: 60))
.foregroundStyle(
LinearGradient(
colors: [.purple, .pink],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
Text("Build Beautiful Apps")
.font(.largeTitle.bold())
Text("Premium SwiftUI components for 2026")
.font(.title3)
.foregroundColor(.secondary)
}
.padding(40)
}
.frame(maxWidth: 500)
HStack(spacing: 16) {
LuxeButton("Get Started", style: .primary) { }
LuxeButton("Learn More", style: .glass) { }
}
}
}
}
}Profile Card
A beautiful user profile card with progress indicators:
struct ProfileCard: View {
@Environment(\.luxeTheme) private var theme
var body: some View {
LuxeCard(configuration: .prominent) {
VStack(spacing: 20) {
// Avatar with progress ring
ZStack {
CircularProgressBar(
progress: 0.75,
showPercentage: false,
gradient: true,
size: 100
)
Image(systemName: "person.circle.fill")
.font(.system(size: 60))
.foregroundColor(theme.primaryColor)
}
Text("Alex Johnson")
.font(.title2.bold())
HStack(spacing: 12) {
LuxeBadge("Pro", color: .purple)
LuxeBadge("Verified", color: .green)
}
Divider()
.background(theme.surfaceColor)
HStack(spacing: 30) {
StatItem(value: "1.2K", label: "Followers")
StatItem(value: "348", label: "Following")
StatItem(value: "52", label: "Posts")
}
}
.padding()
}
.frame(width: 300)
}
}Settings Panel
A glassmorphic settings panel with toggles:
struct SettingsPanel: View {
@State private var darkMode = true
@State private var notifications = true
@State private var haptics = true
@State private var volume: Double = 0.7
var body: some View {
GlassmorphismContainer {
VStack(alignment: .leading, spacing: 24) {
Text("Settings")
.font(.title2.bold())
SettingRow(
icon: "moon.fill",
title: "Dark Mode",
isOn: $darkMode
)
SettingRow(
icon: "bell.fill",
title: "Notifications",
isOn: $notifications
)
SettingRow(
icon: "hand.tap.fill",
title: "Haptic Feedback",
isOn: $haptics
)
Divider()
VStack(alignment: .leading, spacing: 8) {
Text("Volume")
.font(.subheadline)
Slider(value: $volume)
.tint(.purple)
}
}
.padding(24)
}
.frame(width: 350)
}
}Loading States
Beautiful loading indicators and progress states:
struct LoadingView: View {
@State private var progress: Double = 0
var body: some View {
VStack(spacing: 40) {
// Large progress indicator
CircularProgressBar.large(
progress: progress,
showPercentage: true
)
Text("Uploading...")
.font(.headline)
// Small inline indicators
HStack(spacing: 20) {
CircularProgressBar.small(progress: 0.3)
CircularProgressBar.small(progress: 0.6)
CircularProgressBar.small(progress: 0.9)
}
}
.padding()
.refractiveGlass(configuration: .subtle)
.onAppear {
withAnimation(.linear(duration: 3).repeatForever(autoreverses: false)) {
progress = 1.0
}
}
}
}Complete App Structure
A full app structure using LuxeUI:
import SwiftUI
import LuxeUI
@main
struct LuxeApp: App {
@State private var selectedTheme: Theme = .midnight
var body: some Scene {
WindowGroup {
TabView {
HomeView()
.tabItem {
Label("Home", systemImage: "house.fill")
}
ExploreView()
.tabItem {
Label("Explore", systemImage: "sparkles")
}
ProfileView()
.tabItem {
Label("Profile", systemImage: "person.fill")
}
SettingsView(theme: $selectedTheme)
.tabItem {
Label("Settings", systemImage: "gear")
}
}
.luxeTheme(selectedTheme)
.preferredColorScheme(.dark)
}
}
}