Component Gallery

Built 100% with kw-* utilities

Every snippet is composed directly from KahwaCSS class tokens.
Editable + live previewed

Change markup in the editor and see updates instantly in the preview panel.
Copy-ready component snippets

Use Copy to grab code quickly and Reset to restore defaults.

Button System

Action-first button variants with solid, outline, accent, and playful styles.

Editor

Preview

Feature Card

Editorial-style content card for portfolio highlights, offers, and storytelling blocks.

Editor

<article class="kw-bg-[#ffec9e] kw-border-2 kw-border-color-black kw-shadow-md kw-max-w-[320px] kw-mx-auto">
    <header class="kw-bg-[#efefef] kw-border-b-2 kw-border-color-black kw-px-3 kw-py-2">
      <h3 class="kw-text-2xl kw-bold kw-m-0">Web Development</h3>
    </header>
    <div class="kw-p-4">
      <p class="kw-text-xl kw-bold kw-lh-32 kw-mb-4">
        I craft modern, responsive front-end experiences using HTML, CSS, JavaScript, and React, with SEO best practices built in from the start.
      </p>
      <div class="kw-flex kw-gap-2 kw-flex-wrap">
        <button class="kw-bg-[#f5c7d9] kw-text-black kw-px-4 kw-py-2 kw-border-2 kw-border-color-black kw-shadow-sm kw-bold">HTML</button>
        <button class="kw-bg-[#f5c7d9] kw-text-black kw-px-4 kw-py-2 kw-border-2 kw-border-color-black kw-shadow-sm kw-bold">CSS</button>
        <button class="kw-bg-[#f5c7d9] kw-text-black kw-px-4 kw-py-2 kw-border-2 kw-border-color-black kw-shadow-sm kw-bold">JS</button>
        <button class="kw-bg-[#f5c7d9] kw-text-black kw-px-4 kw-py-2 kw-border-2 kw-border-color-black kw-shadow-sm kw-bold">React</button>
      </div>
    </div>
  </article>

Preview

Signup Form

Friendly onboarding form layout with social actions and a high-contrast CTA.

Editor

<form class="kw-bg-[#a7cddd] kw-p-6 kw-rounded-xl kw-border-1 kw-border-color-black kw-shadow-md kw-w-full kw-max-w-[380px] kw-mx-auto">
  <h3 class="kw-text-4xl kw-bold kw-mb-2">Welcome,</h3>
  <p class="kw-text-3xl kw-bold kw-text-gray kw-mb-6">sign up to continue</p>

Preview

Navbar Variants

Three distinct navigation patterns for docs, products, and creative brand pages.

Editor

<div class="kw-grid kw-gap-4">
  <nav class="kw-bg-[#ececec] kw-border-2 kw-border-color-black kw-px-4 kw-py-3 kw-flex kw-justify-between kw-items-center kw-rounded-xl">
    <div class="kw-flex kw-items-center kw-gap-4">
      <span class="kw-bg-[#5ea0ff] kw-border-1 kw-border-color-black kw-rounded-md kw-px-2 kw-py-1 kw-bold">N</span>
      <a class="kw-text-black" href="#">Docs</a>
      <a class="kw-text-black" href="#">Components</a>
      <a class="kw-text-black" href="#">Styling</a>
      <a class="kw-text-black" href="#">Charts</a>
    </div>
    <div class="kw-flex kw-items-center kw-gap-2">
      <input class="kw-bg-white kw-border-1 kw-border-color-black kw-rounded-lg kw-px-3 kw-py-2 kw-w-[180px]" type="text" placeholder="Search" />
      <button class="kw-bg-white kw-border-1 kw-border-color-black kw-rounded-lg kw-px-3 kw-py-2 kw-bold" type="button">GitHub</button>
      <button class="kw-bg-white kw-border-1 kw-border-color-black kw-rounded-lg kw-px-3 kw-py-2 kw-bold" type="button">X</button>
      <button class="kw-bg-white kw-border-1 kw-border-color-black kw-rounded-lg kw-px-3 kw-py-2 kw-bold" type="button">Email</button>
    </div>
  </nav>

<nav class="kw-bg-[#f5f3ef] kw-border-1 kw-border-color-black kw-px-4 kw-py-4 kw-flex kw-justify-between kw-items-center kw-rounded-xl">
    <h3 class="kw-text-2xl kw-bold kw-m-0">< javascript-mastery ></h3>
    <div class="kw-flex kw-gap-3 kw-items-center">
      <a class="kw-text-black kw-text-sm" href="#">WHATS INCLUDED</a>
      <a class="kw-text-black kw-text-sm" href="#">THE JOURNEY</a>
      <a class="kw-text-black kw-text-sm" href="#">PRACTICAL</a>
      <button class="kw-bg-blue kw-text-white kw-border-1 kw-border-color-blue kw-rounded-lg kw-px-4 kw-py-2 kw-bold" type="button">ENROLL NOW</button>
    </div>
  </nav>

<nav class="kw-bg-[#ebe9e3] kw-border-1 kw-border-color-black kw-px-5 kw-py-4 kw-flex kw-justify-between kw-items-center kw-rounded-xl">
    <h3 class="kw-text-3xl kw-bold kw-m-0">FINDING DESIGN</h3>
    <div class="kw-bg-[#f7f7f7] kw-rounded-full kw-px-3 kw-py-2 kw-flex kw-items-center kw-gap-3">
      <a class="kw-text-black" href="#">Services</a>
      <a class="kw-text-black" href="#">About</a>
      <a class="kw-text-black kw-border-b-1 kw-border-color-black" href="#">Portfolio</a>
      <a class="kw-text-black" href="#">Resources</a>
      <button class="kw-bg-[#b7cadf] kw-text-black kw-border-1 kw-border-color-black kw-rounded-full kw-px-4 kw-py-2 kw-bold" type="button">Get in touch -></button>
    </div>
  </nav>
</div>

Preview

Metrics Cards

Compact analytics cards designed for dashboards, KPI strips, and quick reports.

Editor

Preview