ShadKit

A SwiftUI port of shadcn/ui and Vercel AI Elements, built to match the originals rather than approximate them. No dependencies — pure SwiftUI, macOS 14+ / iOS 17+.

Components were ported from the actual registry sources (ui.shadcn.com/r/styles/new-york-v4/*.json and registry.ai-sdk.dev), not from screenshots, so class-for-class details — the has-[>svg]:px-3 padding shift on buttons, dark:bg-input/30 on inputs, the ten-spoke loader's per-spoke opacity — carry across.

Products

.package(url: "https://github.com/jasonkneen/ShadKit", from: "0.1.0")

Design tokens

shadcn publishes its tokens in OKLCH. OKLCH converts to sRGB via OKLab, so a theme can be pasted in verbatim:

OKLCH(css: "oklch(0.145 0 0)")          // #0A0A0A
OKLCH(0.577, 0.245, 27.325).hexString   // #E7000B

Apply a theme once near the root. Components below read the resolved palette for the current appearance:

ContentView()
    .shadcnSurface()                 // theme + the `background` token
    .shadcnTheme(myTheme)            // theme only

Custom themes are the same shape as a shadcn :root block — see ShadcnPaletteSpec. Space.x4 maps Tailwind's spacing scale to points (p-4 → 16), and theme.radius derives the whole radius scale from one --radius.

AI controls

AIConversation(streamToken: chat.streamToken) {
    ForEach(chat.messages) { AIMessageView(message: $0) }
}

AIReasoning(content: thinking, isStreaming: true)
AITool(name: "search_codebase", state: .outputAvailable) {
    AIToolInput(json: input)
    AIToolOutput(output: output)
}
AIResponse(markdown)                 // streaming-safe markdown
AICodeBlock(code: swift, language: "swift")

useChat parity

AIChat is the Swift counterpart to the AI SDK's useChat — same message shape (UIMessage / UIMessagePart), same ChatStatus, same verbs.

@StateObject private var chat = AIChat(transport: MyTransport())

AIChatbot(chat: chat, suggestions: ["Explain this repo"]) { text, status in
    AIPrompt