Getting started: SwiftUI

KitUI, a native Swift package for iOS 17+ and macOS 14+: the Vercel and Liquid Glass themes in SwiftUI, with tokens generated from the same CSS themes

1. Add the package

The package lives in the repository's swift/ folder; the product is KitUI (not to be confused with UIKit). Until it's published, add it by local path: in Xcode, File → Add Package Dependencies… → Add Local…; in Package.swift, as shown below (for a path dependency, the package name is the folder name, swift). The Git URL in the example is a placeholder: to add a package by URL, Package.swift must sit at the repository root, so you'll need a separate repository (or mirror) with the contents of swift/.

dependencies: [
  .package(path: "../valyro-ui/swift"),
  // PLACEHOLDER: once the separate repository is published
  // .package(url: "https://github.com/<org>/kitui-swift.git", from: "0.1.0"),
],
targets: [
  .target(name: "MyApp", dependencies: [.product(name: "KitUI", package: "swift")]),
]

2. Theme

kitTheme(_:mode:) puts the tokens into the environment: .vercel or .glass, with mode .light, .dark or .system. Increase Contrast and Reduce Transparency switch token variants automatically — the same ones CSS uses for prefers-contrast: more and prefers-reduced-transparency: reduce; Reduce Motion turns animations off, and text size follows Dynamic Type. In Glass, surfaces use the native glassEffect on iOS 26 / macOS 26 and .ultraThinMaterial with an edge highlight from --ui-highlight on earlier systems.

import KitUI
import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .kitPageBackground()
        .kitTheme(.glass, mode: .system)
    }
  }
}

3. Components

Where possible, components are SwiftUI styles (.buttonStyle(.kit(.secondary)), .toggleStyle(.kitSwitch), .textFieldStyle(.kit), .progressViewStyle(.kit)); everything else is a view with the Kit prefix. Tokens are available through @Environment(\.kitTokens).

import KitUI
import SwiftUI

struct ContentView: View {
  @State private var email = ""
  @State private var notify = true
  @State private var toasts = KitToastCenter()
  @Environment(\.kitTokens) private var t

  var body: some View {
    VStack(alignment: .leading, spacing: t.space4) {
      KitCard {
        KitCardHeader("Production", description: "Deployed 2 minutes ago")
        TextField("Email", text: $email).textFieldStyle(.kit(systemImage: "envelope"))
        Toggle("Email me", isOn: $notify).toggleStyle(.kitSwitch)
        HStack {
          Button("Cancel") {}.buttonStyle(.kit(.secondary))
          KitButton("Deploy", systemImage: "arrow.up.circle") {
            toasts.show("Deployed", status: .success)
          }
        }
      }
      ProgressView(value: 0.6).progressViewStyle(.kit)
    }
    .padding()
    .kitToasts(toasts)
  }
}

4. Geist font (Vercel)

Geist isn't bundled with the package. Add the Geist and Geist Mono files (OFL license) to your app target and register them before the first screen — via UIAppFonts (iOS) / ATSApplicationFontsPath (macOS) in Info.plist, or in code. KitUI uses the first installed family from --ui-font-sans / --ui-font-mono; without Geist, it falls back to SF Pro and SF Mono.

import CoreText

// In your App's init():
for url in Bundle.main.urls(forResourcesWithExtension: "otf", subdirectory: "Fonts") ?? [] {
  CTFontManagerRegisterFontsForURL(url as CFURL, .process, nil)
}

5. Tokens from CSS

Colors, radii, spacing, font sizes and weights, per-layer shadows, durations and easing curves, and glass parameters aren't copied by hand: npm run tokens:export loads src/lib/styles/themes/*.css in headless Chromium, reads the computed values for every theme, mode and accessibility variant, and writes tokens/tokens.json (a DTCG-style format) and swift/Sources/KitUI/Generated/Tokens.swift. After an export, a new theme file becomes a new case in KitTheme.

npm run tokens:export

6. Catalog and tests

swift run KitUICatalog opens a macOS window with every component plus theme and mode switches. The tests check the tokens against the CSS and render each component in every theme and mode to PNG ($KITUI_SNAPSHOT_DIR). With Xcode, swift test is enough; with only the Command Line Tools installed, run npm run swift:test — a plain swift test there can't find Swift Testing and silently skips the tests.

cd swift
swift build
swift run KitUICatalog
cd .. && npm run swift:test

7. Limitations

Building for iOS and running in the simulator or on a device require Xcode; without it, the package was built and tested on macOS, and the KitUI code was compiled for iOS 17 via Mac Catalyst. Native components: Button, IconButton, Badge, Avatar and AvatarGroup, Card, a TextField/SecureField style, Toggle (switch and checkbox), SegmentedControl, Slider, ProgressBar, Spinner, Skeleton, Alert, Toast, Sheet styling, Tabs, FloatingTabBar, ListRow, StatsCard with Sparkline, EmptyState, ChatMessage and PromptComposer; everything else (tables, charts, the command palette, editors, etc.) is web-only. Component CSS tokens are included in KitTokens, but only the components listed here use them.

Other frameworks