Components

Each component below is rendered live (the docs site has chaiTailwind loaded) and the code is right beside it. Click into a code block to copy the markup.

Buttons

Three weights — primary, secondary, ghost — plus a pill variant. All use the same spacing scale; only color and border change.

Buttons · 4 variants

primary · secondary · ghost · pill

<button class="chai-px-5 chai-py-2.5 chai-bg-chai-700 chai-text-white chai-rounded-md chai-cursor-pointer">Primary</button>
<button class="chai-px-5 chai-py-2.5 chai-bg-cream-100 chai-text-chai-800 chai-rounded-md chai-cursor-pointer chai-border chai-border-chai-300">Secondary</button>
<button class="chai-px-5 chai-py-2.5 chai-bg-transparent chai-text-chai-800 chai-rounded-md chai-cursor-pointer">Ghost</button>
<button class="chai-px-5 chai-py-2.5 chai-bg-chai-800 chai-text-cream-50 chai-rounded-full chai-cursor-pointer chai-shadow-md">Pill →</button>

Badges

Compact pills for status, category, or metadata.

Badges

5 tones from the brand palette

NewActivePendingLiveDraft

<span class="chai-px-3 chai-py-1 chai-rounded-full chai-text-xs chai-bg-saffron-100  chai-text-saffron-800  chai-uppercase chai-tracking-wider">New</span>
<span class="chai-px-3 chai-py-1 chai-rounded-full chai-text-xs chai-bg-cardamom-100 chai-text-cardamom-800 chai-uppercase chai-tracking-wider">Active</span>
<span class="chai-px-3 chai-py-1 chai-rounded-full chai-text-xs chai-bg-masala-100   chai-text-masala-800   chai-uppercase chai-tracking-wider">Pending</span>
<span class="chai-px-3 chai-py-1 chai-rounded-full chai-text-xs chai-bg-chai-800     chai-text-cream-50     chai-uppercase chai-tracking-wider">Live</span>
<span class="chai-px-3 chai-py-1 chai-rounded-full chai-text-xs chai-bg-cream-200    chai-text-chai-700     chai-border chai-border-chai-300 chai-uppercase chai-tracking-wider">Draft</span>

Card with header

A warm, bordered card with eyebrow, headline, body, and a CTA at the bottom.

Editorial card

eyebrow · title · body · CTA

Origin · Castleton

Darjeeling first flush

A bright, floral spring pluck. Pale liquor, a finish of green apple, almost wine-like.

Steep this →

<article class="chai-bg-cream-50 chai-rounded-2xl chai-p-8 chai-border chai-border-chai-200 chai-shadow-md">
  <div class="chai-text-xs chai-uppercase chai-tracking-widest chai-text-saffron chai-mb-3">Origin · Castleton</div>
  <h3 class="chai-text-2xl chai-text-chai-900 chai-font-semibold chai-mb-2">Darjeeling first flush</h3>
  <p class="chai-text-chai-700 chai-leading-relaxed chai-mb-6">A bright, floral spring pluck. Pale liquor, a finish of green apple, almost wine-like.</p>
  <a href="#" class="chai-inline-block chai-text-chai-800 chai-italic chai-no-underline chai-border-b chai-border-saffron">Steep this →</a>
</article>

Stat tile

Number with label and a trend indicator. Common in dashboards.

Stat tile

label · value · trend

Cups served · today

1,284

+12.4%

Active orders

live

<article class="chai-bg-cream-50 chai-p-6 chai-rounded-xl chai-border chai-border-chai-200">
  <div class="chai-text-xs chai-uppercase chai-tracking-wider chai-text-chai-600 chai-mb-3">Cups served · today</div>
  <div class="chai-flex chai-items-baseline chai-gap-2">
    <div class="chai-text-3xl chai-font-semibold chai-text-chai-900">1,284</div>
    <div class="chai-text-xs chai-text-cardamom-700">+12.4%</div>
  </div>
</article>

Callout

A bordered note block — works for tips, warnings, or quotes.

Callouts

tip · warning

<aside class="chai-p-4 chai-bg-cardamom-100 chai-border-l-4 chai-border-cardamom chai-rounded-md">
  <div class="chai-text-xs chai-uppercase chai-tracking-wider chai-text-cardamom-700 chai-mb-1 chai-font-semibold">Tip</div>
  <div class="chai-text-cardamom-900 chai-leading-relaxed chai-text-sm">Numeric values are pixels.</div>
</aside>

A simple top navigation with logo, links, and a CTA.

Navbar

logo · links · CTA

<nav class="chai-flex chai-justify-between chai-items-center chai-px-8 chai-py-4 chai-bg-cream-50 chai-border-b chai-border-chai-200">
  <a href="#" class="chai-flex chai-items-center chai-gap-2 chai-no-underline">
    <span class="chai-w-8 chai-h-8 chai-rounded-md chai-bg-chai-700 chai-text-cream-50 chai-flex chai-items-center chai-justify-center chai-font-bold">K</span>
    <span class="chai-text-lg chai-font-semibold chai-text-chai-900">Köfi</span>
  </a>
  <div class="chai-flex chai-gap-6 chai-text-sm chai-text-chai-800">
    <a href="#" class="chai-no-underline">Menu</a>
    <a href="#" class="chai-no-underline">Story</a>
    <a href="#" class="chai-no-underline">Visit</a>
  </div>
  <a href="#" class="chai-px-4 chai-py-2 chai-bg-chai-800 chai-text-cream-50 chai-rounded-full chai-text-sm chai-no-underline">Order →</a>
</nav>

Form: input + button

A common newsletter / sign-up grouping.

Inline form

input · button

<form class="chai-flex chai-gap-2 chai-items-center">
  <input type="email" placeholder="[email protected]"
         class="chai-px-4 chai-py-2 chai-rounded-full chai-border chai-border-chai-300 chai-bg-cream-50 chai-text-chai-800 chai-flex-1">
  <button class="chai-px-5 chai-py-2 chai-bg-chai-800 chai-text-cream-50 chai-rounded-full chai-cursor-pointer">Subscribe</button>
</form>

Hero block

A complete hero you can drop in unchanged.

Hero block

eyebrow · headline · lede · dual CTA

v1 · just shipped

A small thing, made carefully.

A short tagline that explains what you’re showing without trying too hard.

Get started Read docs

<section class="chai-py-20 chai-px-12 chai-bg-cream-100 chai-text-center">
  <div class="chai-text-xs chai-uppercase chai-tracking-widest chai-text-saffron chai-mb-4">v1 · just shipped</div>
  <h1 class="chai-text-5xl chai-text-chai-900 chai-font-bold chai-leading-tight chai-mb-4">A small thing,<br>made carefully.</h1>
  <p class="chai-text-lg chai-text-chai-700 chai-leading-relaxed chai-max-w-[60ch] chai-mx-auto chai-mb-8">A short tagline that explains what you're showing without trying too hard.</p>
  <div class="chai-flex chai-gap-3 chai-justify-center">
    <a href="#" class="chai-px-6 chai-py-3 chai-bg-chai-800 chai-text-cream-50 chai-rounded-full chai-no-underline chai-shadow-md">Get started</a>
    <a href="#" class="chai-px-6 chai-py-3 chai-border chai-border-chai-300 chai-text-chai-800 chai-rounded-full chai-no-underline">Read docs</a>
  </div>
</section>

These are starting points, not constraints. The whole point of utility-first is that every component is one regex match away from a different aesthetic — change the colors, change the radius, change the type scale.

Want a fuller assembled page? Head over to Templates.

Made by Saad · @developedbysaad on X