Components - LuxeUI

Refractive Glass

Featured

The 2026 signature effect. Unlike standard glassmorphism (simple blur), this effect physically warps and distorts the background like looking through a real glass lens or water droplet.

✓ Real lens distortion at edges

✓ Animated caustic light patterns

✓ Chromatic aberration (RGB separation)

✓ Multi-layer refractive depth

Basic Usage

import LuxeUI

VStack {
    Text("Premium Content")
        .font(.title)
}
.padding()
.refractiveGlass(intensity: 0.2)

RefractiveGlassCard Component

RefractiveGlassCard(
    distortionIntensity: 0.25,
    chromaticAberration: true
) {
    VStack(spacing: 16) {
        Image(systemName: "sparkles")
            .font(.system(size: 50))
        Text("Liquid Glass")
            .font(.title2.bold())
    }
}
.frame(width: 300, height: 200)

Configuration Presets

.default

Balanced effect for most use cases

.subtle

Light effect for text-heavy content

.intense

Strong distortion for hero elements

.liquid

Water-like flowing distortion

.frosted

Heavy blur, minimal distortion

.minimal

Performance-optimized

LuxeCard

A premium floating glass card with hover effects, press animations, and haptic feedback. Creates a modern, elevated UI element perfect for dashboards and content showcases.

Basic Usage

LuxeCard {
    VStack(spacing: 12) {
        Image(systemName: "star.fill")
            .font(.largeTitle)
            .foregroundColor(.yellow)
        Text("Premium Feature")
            .font(.headline)
    }
    .padding()
}

With Callbacks

LuxeCard {
    Text("Interactive Card")
}
.onTap { print("Tapped!") }
.onHoverStart { print("Hover began") }
.onHoverEnd { print("Hover ended") }

Configuration Presets

.default

Standard settings for most use cases

.compact

Smaller radius for dense layouts

.prominent

Large, bold appearance

.subtle

Minimal, understated styling

.floating

Maximum elevation with deep shadows

LuxeButton

Premium buttons with gradient backgrounds, press animations, and haptic feedback. Available in multiple visual styles to fit any design.

Button Styles

// Primary - Gradient background with glow
LuxeButton("Get Started", style: .primary) {
    print("Primary tapped!")
}

// Secondary - Outlined with subtle fill
LuxeButton("Learn More", style: .secondary) {
    print("Secondary tapped!")
}

// Glass - Glassmorphic with blur
LuxeButton("Continue", style: .glass) {
    print("Glass tapped!")
}

Size Variants

LuxeButton("Small", style: .primary, configuration: .small) { }
LuxeButton("Medium", style: .primary, configuration: .medium) { }
LuxeButton("Large", style: .primary, configuration: .large) { }
LuxeButton("Extra Large", style: .primary, configuration: .extraLarge) { }

CircularProgressBar

Animated ring progress indicator with smooth spring animations. Perfect for loading states, upload progress, and achievement displays.

Basic Usage

CircularProgressBar(
    progress: 0.75,
    showPercentage: true,
    gradient: true,
    size: 160
)

Size Variants

CircularProgressBar.small(progress: 0.5)
CircularProgressBar.medium(progress: 0.65, showPercentage: true)
CircularProgressBar.large(progress: 0.9, showPercentage: true)

MeshGradientBackground

Beautiful animated mesh gradients with floating orbs, similar to macOS 15. Creates depth and atmosphere for your app's background.

Basic Usage

ZStack {
    MeshGradientBackground(colors: [.purple, .pink, .blue])
    
    // Your content here
    Text("Hello World")
}

Smart Interactions

Intelligent interaction systems including velocity-aware springs, magnetic pull effects, and predictive layouts that adapt to user intent.

SmartSprings

Image("card")
    .smartSprings(configuration: .bouncy)
    .magneticPull(configuration: .strong)

PredictiveLayouts

AdaptiveContainer {
    ForEach(items) { item in
        ItemView(item: item)
    }
}
.adaptToContent()

Liquid UI

Organic, "gooey" components that feel alive with fluid animations and morphing shapes.

LiquidButton

LiquidButton(
    "Tap Me",
    icon: "drop.fill",
    configuration: .neon
) {
    print("Splashed!")
}

LiquidLoader

LiquidLoader(configuration: .default)
    .frame(width: 60, height: 60)
    .foregroundColor(.cyan)

Additional Components

LuxeBadge

LuxeBadge("Premium", color: .purple)
LuxeBadge("New", color: .green)
LuxeBadge("Hot", color: .orange)

FloatingOrb

FloatingOrb(color: .purple, size: 100)
FloatingOrb(color: .blue, size: 150, blur: 40)

GlassmorphismContainer

GlassmorphismContainer {
    Text("Frosted glass container")
        .padding()
}

MultiThumbSlider

@State private var range: ClosedRange<Double> = 20...80

MultiThumbSlider(range: $range, bounds: 0...100)