Installation

Get Sitka running in your project in under five minutes.

1. Clone the repository

bash

git clone https://github.com/your-org/sitka.git
cd sitka
npm install

2. Start the dev server

bash

npm run dev
# Open http://localhost:3000

3. Use components

Components live in src/components/ui/. Import directly:

app/page.tsx

tsx

import { Button } from "@/components/ui/Button";

export function MyPage() {
  return (
    <Button variant="primary" size="lg">
      Launch Product
    </Button>
  );
}

4. Use design tokens

CSS custom properties are available globally after importing globals.css:

css

.my-component {
  background: rgb(var(--surface));
  color: rgb(var(--text-primary));
  border: 1px solid rgb(var(--border));
  border-radius: 10px; /* token: borderRadius.md */
}

iOS / SwiftUI

Export the Swift token file from the Token Export page and add it to your Xcode project.

swift

// After adding SitkaTokens.swift to your project:
import SwiftUI

struct ContentView: View {
    var body: some View {
        SitkaButton(title: "Get Started", variant: .primary) {
            // action
        }
    }
}