---
title: ThemeKit
description: A themeable SwiftUI component library — accessible components, design tokens, light/dark, and RTL.
template: splash
hero:
  tagline: Themeable SwiftUI components, built to ship. Accessible, tokenized, light/dark & RTL-ready.
  image:
    dark: ../../assets/banner-dark.png
    light: ../../assets/banner.png
  actions:
    - text: Get Started
      link: guides/getting-started/
      icon: right-arrow
      variant: primary
    - text: View on GitHub
      link: https://github.com/isamercan/ThemeKit
      icon: external
      variant: minimal
---

import { Card, CardGrid } from '@astrojs/starlight/components';

export const base = import.meta.env.BASE_URL;

<p class="tk-author">
  Created &amp; maintained by <a href="https://github.com/isamercan" target="_blank" rel="noopener">@isamercan</a>
</p>

<CardGrid stagger>
	<Card title="Design tokens" icon="setting">
		Color, spacing, radius, and typography flow from a single theme. Restyle the
		whole library by swapping one token set.
	</Card>
	<Card title="Accessible by default" icon="approve-check">
		Dynamic Type, VoiceOver labels, and contrast baked in — not bolted on.
	</Card>
	<Card title="Light, dark & RTL" icon="moon">
		Every component ships light/dark variants and mirrors correctly for
		right-to-left layouts.
	</Card>
	<Card title="Swift Package" icon="seti:swift">
		Drop-in via SwiftPM. Browse the full API in the
		[DocC reference](/ThemeKit/api/documentation/themekit/).
	</Card>
</CardGrid>

## One library, every theme

The same components, re-skinned by swapping a single theme. Cupcake stays cream,
dracula slate, cyberpunk yellow — brand color follows the theme while semantic
colors stay consistent.

<div class="tk-shots">
  <img src={`${base}showcase/app-themes.png`} alt="The same screens rendered under multiple themes" loading="lazy" />
  <img src={`${base}showcase/app-components.png`} alt="The ThemeKit component catalog in the demo app" loading="lazy" />
  <img src={`${base}showcase/app-theme-generator.png`} alt="The on-device theme generator deriving a full palette from one accent color" loading="lazy" />
  <img src={`${base}showcase/app-hotel-detail.png`} alt="A hotel detail screen built entirely from ThemeKit components" loading="lazy" />
</div>

Browse all **95 components** in the [gallery](components/), or jump straight to
[Getting Started](guides/getting-started/).
