EightBit-SwiftUI

A retro 8-bit UI component library for SwiftUI, inspired by 8bitcn-ui.

Features

• 🎮 13 Retro Themes: Default, Gameboy, Sega, Nintendo, Atari, Arcade, Neo Geo, Soft Pop, VHS, Pacman, Cassette, Rusty Byte, Zelda
• 🧩 6 Core Components: Button, Card, TextField, Badge, ProgressBar, Alert
• 🔤 Bundled Pixel Font: Press Start 2P font included
• 🌓 Dark Mode Support: All themes have light and dark variants
• 📱 iOS 18+: Built for the latest SwiftUI features

Screens

Home Screen	Components

Installation

Swift Package Manager

Add the package to your Xcode project:

1. File → Add Packages...
2. Enter the repository URL
3. Select "EightBit-SwiftUI"

Or add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/your-username/EightBit-SwiftUI", from: "1.0.0")
]

Quick Start

import SwiftUI
import EightBitSwiftUI

@main
struct MyApp: App {
    init() {
        // Register fonts at startup
        EightBitFonts.registerFonts()
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .eightBitTheme(.gameboy)
        }
    }
}

Usage

Apply a Theme

ContentView()
    .eightBitTheme(.gameboy)

Available Themes

.default    // Clean monochrome
.gameboy    // Classic green LCD
.sega       // Blue/purple Sega style
.nintendo   // Red/purple Nintendo style
.atari      // Warm orange/brown
.arcade     // Neon pink/blue
.neoGeo     // Warm orange/red
.softPop    // Pastel colors
.vhs        // Retro pink/purple CRT
.pacman     // Classic yellow/blue
.cassette   // Warm analog tape
.rustyByte  // Industrial rust
.zelda      // Green and gold

Components

Button

EightBitButton("Start Game", variant: .primary, size: .medium) {
    // Action
}

// Variants: .primary, .secondary, .destructive, .outline, .ghost
// Sizes: .small, .medium, .large

Card

EightBitCard {
    EightBitCardHeader {
        EightBitCardTitle("Quest Log")
        EightBitCardDescription("Your active quests")
    }
    EightBitCardContent {
        Text("Content here")
    }
    EightBitCardFooter {
        EightBitButton("Action") {}
    }
}

TextField

@State private var name = ""

EightBitTextField("Enter name...", text: $name)
EightBitLabeledTextField("Player Name", placeholder: "Hero", text: $name)

Badge

EightBitBadge("NEW")
EightBitBadge("RARE", variant: .secondary)
EightBitBadge("DANGER", variant: .destructive)
EightBitBadge("QUEST", variant: .outline)

Progress Bar

// Health/Mana/XP style bars
EightBitProgressBar(value: 0.75, style: .health, showLabel: true)
EightBitProgressBar(value: 0.6, style: .mana)
EightBitProgressBar(value: 0.45, style: .xp)

// Labeled version
EightBitLabeledProgressBar("HP", value: 75, maxValue: 100, style: .health)

Alert

EightBitAlert(variant: .success) {
    EightBitAlertTitle("Level Complete!")
    EightBitAlertDescription("You earned 100 XP")
}

// Variants: .default, .info, .success, .warning, .destructive

Using the 8-Bit Font

Text("GAME OVER")
    .font(.eightBit(size: 16))

// Or use preset sizes
Text("Press Start")
    .font(.eightBitLarge)

View Modifiers

// 8-bit styled navigation title (forces inline display mode on iOS)
NavigationStack {
    ContentView()
        .eightBitNavigationTitle("My Game")
}

// Authentic pixelated border (corner blocks + edge strips)
// This is the primary border style used by components
myView.pixelatedBorder()

// Customizable pixelated border
myView.pixelatedBorder(color: .green, blockSize: 6)

// Simple pixel-style border (Legacy/Simple)
myView.pixelBorder(width: 4)

// Pixel-style shadow (offset shadow)
myView.pixelShadow(offset: 4)

// Internal 3D highlight/shadow strips
myView.internalShadow()

// Retro font
myView.retroFont(size: 12)

Haptic Feedback

All EightBitButton instances automatically include heavy impact haptic feedback when pressed for an authentic retro feel.

Demo App

The Example/EightBitDemo folder contains a demo app showcasing all components and themes.

License

MIT License - see LICENSE file for details.

Credits

• Inspired by 8bitcn-ui
• Font: Press Start 2P (OFL License)