Sitka logoSitkav1.8

Getting Started

  • Introduction
  • Design Principles
  • Installation

Foundations

  • AccessibilityNew
  • Color
  • Contrast
  • Typography
  • Icons
  • Spacing
  • Border Radius
  • Shadows
  • Glass
  • Spatial Computing
  • Motion
  • Interaction
  • Gestures
  • Haptics
  • Keyboard Shortcuts
  • Writing
  • Data Visualisation
  • Charting
  • Desktop Layout
  • Empty States
  • Loading States
  • AI Agent Standards
  • Density SystemNew
  • Responsive GridNew
  • RTL & i18nNew
  • Forced ColorsNew
  • Component LifecycleNew

Components

  • ButtonGold Standard
  • Split Button
  • Segmented Button
  • ToggleNew
  • Chip
  • Input
  • TextareaNew
  • Prompt Input
  • OTP / PIN
  • Select
  • Checkbox
  • Radio
  • Switch
  • Slider
  • Combobox
  • Date & Time Picker
  • Date Range Picker
  • File UploadNew
  • LabelNew
  • Form Controls
  • Modal
  • Tooltip
  • PopoverNew
  • Dropdown MenuNew
  • Snackbar
  • Bottom Sheet
  • Context MenuNew
  • Feature GateNew
  • Command PaletteNew
  • DrawerNew
  • Navigation
  • Navigation MenuNew
  • MenubarNew
  • Tabs
  • Bottom Tab Bar
  • Breadcrumb
  • Carousel
  • Card
  • Badge
  • Avatar
  • Brand LogoNew
  • Table
  • Data GridNew
  • Progress BarNew
  • KPI TileNew
  • GaugeNew
  • Color PickerNew
  • SkeletonNew
  • SpinnerNew
  • DividerNew
  • Code BlockNew
  • Streaming TextNew
  • Chat MessageNew
  • Layout PrimitivesNew
  • CollapsibleNew
  • PaginationNew
  • SidebarNew

Patterns

  • Master Detail
  • Navbar
  • Form
  • Form Layout
  • Form Validation
  • Settings
  • WizardNew
  • Onboarding
  • Mobile Navigation
  • Mobile Widgets
  • Mobile Time LoggingNew
  • Voice Memo & DictationNew
  • Interview Email ParserNew
  • Document AssemblerNew
  • Interview Prep HubNew
  • Ghost Employer TrackingNew
  • Barcode ScannerNew
  • GTD Task InboxNew
  • Kanban BoardNew
  • Gantt / TimelineNew
  • Analytics DashboardNew
  • Burn TrajectoryNew
  • Goal & StreakNew
  • Team Capacity GridNew
  • Alluvial / Sankey FlowNew
  • Pricing Table
  • Activity FeedNew
  • Multi-select & Bulk ActionsNew
  • Data Entry
  • Drag and Drop
  • Import / ExportNew
  • Integration SettingsNew
  • Paywall / UpsellNew
  • Compensation BreakdownNew
  • Strategic InsightsNew
  • Notifications · Mobile
  • Notifications · Desktop
  • Chat & Conversation
  • Collaboration & Sharing
  • Media Player

How-tos

  • All how-tos
  • Design for dark mode
  • Ensure colour is accessible
  • Write clear interface copy
  • Visualise data accessibly
  • Design an onboarding flow
  • Wire Sitka's ThemeManager in SwiftUI

Resources

  • Overview
  • React · Next.js
  • React · Vite
  • Storybook
  • Tokens Only
  • iOS · SwiftUI
  • macOS · SwiftUI
  • React Native
  • Android · Compose
  • Figma
  • Design Tokens
  • Token Export
  • Theme Customizer
  • ESLint Plugin

About

  • Changelog
  • License
  • Status

Sitka

Libraries

Sitka ships adapters for every platform in your stack. Pick the one that matches your project and follow the guide to get up and running in minutes.

React · Next.js

Official

Drop Sitka components into any Next.js app. Full server/client component support, Tailwind 4, dark mode out of the box.

React 19Next.js 16Tailwind 4Framer Motion

React · Vite

Official

Use Sitka in a standalone Vite SPA. Same components and tokens, zero framework overhead.

React 19Vite 5Tailwind 4CSS Variables

Tokens Only

Framework-agnostic

Consume Sitka's design tokens without React. Available as CSS custom properties, JSON, and a JS/TS module.

CSS VariablesJSON exportJS/TS moduleDTCG format

iOS · SwiftUI

Official

Export Sitka tokens as a Swift file and use them directly in SwiftUI with typed color and spacing constants.

SwiftUISwift 5.9+iOS 16+Typed tokens

Figma

Coming Soon

Sitka's Figma library is coming soon — components, variables, and Code Connect mappings that link your design directly to this codebase.

ComponentsVariablesCode ConnectAuto Layout

All libraries share the same design tokens — colour, spacing, motion, and typography stay consistent across every platform.