Get started

Build with the Koder Design System — cross-platform from one toolkit.

Pick a surface

Six canonical surfaces are wired into the Koder Design System. Pick the one that matches your target; each card links to the deep-dive surface spec.

Flutter

Dart + Flutter SDK + koder_kit

import 'package:koder_kit/koder_kit.dart';

void main() => runApp(const KoderApp(
  productId: 'my-product',
  home: MyHomePage(),
));

Compose Android

Kotlin + Compose + koder-design-compose

import dev.koder.design.compose.theme.KoderDesignTheme

@Composable
fun MyApp() = KoderDesignTheme {
  // Material 3 widgets, Koder skin
}

SwiftUI iOS

Swift + SwiftUI + koder-design-swift

import KoderDesignSwift

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView().koderDesignTheme() }
  }
}

Web (templ + HTMX)

HTMX + templ + koder_web_kit

{{ template "koder-app-shell" . }}
<main>
  <koder-button variant="filled" hx-post="/action">
    Click me
  </koder-button>
</main>

XR preview

Compose + Jetpack XR SDK (preview)

KoderXrOverrides {
  KoderUserSubspace {
    KoderDesignTheme {
      // 2D content auto-spatializes
    }
  }
}

Wear preview

Compose Wear OS + koder_kit_wear (preview)

KoderWearTheme {
  KoderPrimaryLayout(
    titleSlot = { Text("My Watch") },
    mainSlot  = { /* content */ },
    bottomSlot = { KoderEdgeButton(...) },
  )
}

Which surface should I use?

Form factor + interactivity drive the choice. Cross-platform priority leans Flutter; native-only priority leans Compose + SwiftUI in parallel.

Phone / tablet (consumer-facing): Flutter · Compose Android + SwiftUI iOS
Web (admin dashboards, console UIs, marketing landings): koder_web_kit (server-rendered, low JS) · Flutter Web (highly interactive SPA)
XR (Vision Pro, Quest, Android XR): Compose XR (preview)
Wear OS smartwatch: Compose Wear (preview)
CLI / TUI: Go + bubbletea; design system minimal (text + ANSI colors).

Universal behaviors

Every surface ratifies the same cross-cutting behaviors — login, auto-update, i18n, error reporting. Wire them once via the SDK widgets.