index.html

---
id: home
title: Home
layout: plain

image:  /assets/headers/keyboardkit.jpg

page-class: glass-background bg1

hero:
  eyebrow: KeyboardKit
  title: Create amazing custom keyboards
  image: /assets/feature-promos/plain-blueprint-split.png
  cta:
    title: Get Started
    class: secondary
    url: https://github.com/keyboardkit/keyboardkit
  cta2:
    title: Pro Features
    class: gold
    url: /pro
  
  message:
    text: Host application problems discovered in iOS 26.4.
    type: warning
    link:
      text: Read more
      url: /blog/2026/03/02/ios-26-4-host-application-bundle-id-bug

description: The KeyboardKit SDK lets you create amazing custom keyboards for Apple platforms, using modern technologies like Swift & SwiftUI.
---

<div class="home-content paper">
  <section class="wrapper wide slide-in">
    <h2>What is a Custom Keyboard?</h2>
    <p>
      A custom keyboard can replace the native iOS keyboard and provide unique <a href="features">features</a>, specialized <a href="features/layout">layouts</a>, extended <a href="features/localization">language support</a>, powerful <a href="features/ai">AI tools</a>, and personalized experiences.
    </p>
    <div class="cta">
      <a class="secondary" href="about">
        Learn more
      </a>
    </div>
  </section>
  
  <section class="wrapper wide">
    <h2>KeyboardKit - Native Feel, Unlimited Potential</h2>
    <p>
      KeyboardKit SDK lets you build custom keyboards that look and feel native, but where every aspect of the keyboard can be customized - giving you complete creative freedom.
    </p>
    <div class="grid col2">
      {% include kankoda/promos/promo-box
         title="Native Features"
         image="/assets/feature-promos/keyboardview.png"
         text="KeyboardKit mimics many native features and has a keyboard view that renders a native-looking keyboard."
         class="slide-in with-separator"
         cta="Learn more"
         cta-link="features/essentials"
      %}
      {% include kankoda/promos/promo-box
         title="👑 KeyboardKit Pro"
         image="/assets/feature-promos/autocomplete.png"
         text="KeyboardKit Pro unlocks pro features like autocomplete, dictation, fonts, etc."
         class="slide-in with-separator"
         cta="Get Pro"
         cta-class="gold"
         cta-link="features/autocomplete"
      %}
      {% include kankoda/promos/promo-box
         title="Fully Customizable"
         image="/assets/feature-promos/blueprint.png"
         text="KeyboardKit lets you customize all parts of the keyboard - everything from layout and styles to how it behaves."
         class="slide-in with-separator"
         cta="Learn more"
         cta-link="features/essentials"
      %}
      {% include kankoda/promos/promo-box
         title="AI Powered"
         image="/assets/feature-promos/ai.png"
         text="KeyboardKit can read the full document content and lets you prompt directly within the keyboard."
         class="slide-in with-separator"
         cta="Learn more"
         cta-link="features/ai"
      %}
    </div>
  </section>

  <section class="wrapper wide slide-in">
    <h2>Getting Started</h2>
    <p>
      KeyboardKit is completely free to start using. Add it to from <a href="{{site.urls.github}}">GitHub</a> and follow the <a href="{{site.urls.docs}}">documentation</a> to create your very own custom keyboard. You'll be up and running in minutes.
    </p>
    <div class="cta">
      <a class="secondary" href="{{site.urls.docs}}">
        Documentation
      </a>
      <a class="cta" href="{{site.urls.github}}">
        GitHub
      </a>
    </div>
  </section>

  <section class="wrapper wide slide-in">
    {% include kankoda/promos/promo-box
        image="/assets/feature-promos/localization.png"
        title="Supports 75 locales"
        text="KeyboardKit supports 75 locales and language-specific layouts and input methods, like Vietnamese."
        class="rounded blue glass panel slide-in"
        cta="Learn more"
        cta-link="features/localization"
        cta2="Locales"
        cta2-link="locales"
    %}
  </section>

  <section class="wrapper wide slide-in">
    <h2>Latest News</h2>
    <p> 
      Follow the <a href="/blog">KeyboardKit blog</a> for news & updates.
    </p>
    <div class="grid col2 blog list">
      {% for post in site.posts limit:2 %}
      <div>
        {% include kankoda/blog/image-item post=posts.first tag-limit=1 %}
      </div>
      {% endfor %}
    </div>
  </section>

  <section class="wrapper">
    <div class="grid col2">
      <div class="slide-in">
        <h2>Social Media</h2>
        <p>Follow KeyboardKit on <a href="{{site.urls.bluesky}}">Bluesky</a> and <a href="{{site.urls.mastodon}}">Mastodon</a> for the latest news.</p>
        <div>
          {% include kankoda/buttons/social name="bluesky" href=site.urls.bluesky class="scale" %}
          {% include kankoda/buttons/social name="mastodon" href=site.urls.mastodon class="scale" %}  
        </div>
      </div>
      <div class="slide-in">
        <h2>Newsletter</h2>
        <p>Subscribe to <a href="{{site.urls.newsletter}}">the KeyboardKit newsletter</a> for periodic updates.</p>
        {% include kankoda/widgets/newsletter %}
      </div>
    </div>
  </section>
  
  <section class="wrapper wide slide-in">
    <h2>Case Studies</h2>
    <p>
      Check out some <a href="/case-studies">case studies</a> of amazing apps & products that use KeyboardKit in their keyboards.
    </p>
    {% assign studies = site.case-studies | where:"featured",1 %}
    {% include case-study-links.html items=studies limit=4 featured=true %}
    <div class="cta">
      <a class="secondary" href="/case-studies">
        See all case studies
      </a>
    </div>
  </section>

  <section class="wrapper wide slide-in">
    {% include kankoda/promos/promo-box
        title="On the App Store!"
        image="/assets/icon/icon.png"
        image-class="small"
        text="The KeyboardKit app lets you try all KeyboardKit features directly on your phone."
        class="rounded dark glass panel slide-in"
        cta="Learn More"
        cta-link="/app"
        cta2="App Store"
        cta2-class="black"
        cta2-link=site.urls.appstore
    %}
  </section>

  <section class="wrapper wide slide-in">
    <h2>Get in Touch</h2>
    <p>
      Do you have any questions, ideas, or want to discuss your custom keyboard project? We'd love to hear from you! Feel free to reach out anytime.
    </p>
    <div class="cta">
      <a href="{{site.urls.email}}">
        Contact Us
      </a>
    </div>
  </section>

</div>