☕ chaiUi

A lightweight, JavaScript-powered utility-first styling library that brings a warm, chai-inspired design system to the browser — without any build tools.

Retro spirit, modern utility flow: old-school look, runtime-first engine.

📦 NPM Quick Start

npm install @gaurav009/chai-ui

CDN:

<script src="https://unpkg.com/@gaurav009/chai-ui/dist/chai-ui.js"></script>

🧠 What is chaiUi?

chaiUi is a runtime utility library that lets you style elements using small, composable utility tokens — similar to Tailwind — but powered entirely by JavaScript + DOM manipulation.

No bundlers. No compilation. Just plug and play.

🎯 Why chaiUi?

Modern CSS frameworks rely on build steps.

chaiUi takes a different approach:

• ⚡ Works directly in the browser
• 🧩 Utility-first (compose styles like LEGO)
• ☕ Comes with a unique chai-themed design language
• 🛠 Built using only JavaScript + DOM

🚀 Example

<div chaiCss="kinare-se-4 pichhe-chai likhawat-safed gol-kinara chai-parchai">
  ☕ Sip the code
</div>

chaiUi will parse the chaiCss attribute and apply styles dynamically.

🕹️ Old School Use Case

<section chaiCss="kinare-se-4 pichhe-cream kinara-rekha gol-kinara-2">
  <h2 chaiCss="akshar-xl font-mota niche-se-2">chaiUi Control Panel</h2>
  <p chaiCss="akshar-samanya niche-se-2">
    Classic dashboard vibes with no CSS file.
  </p>

  <div chaiCss="lacheela fasla-2">
    <button
      chaiCss="kinare-x-se-3 kinare-y-se-2 pichhe-chai likhawat-safed gol-kinara"
    >
      Brew
    </button>
    <button
      chaiCss="kinare-x-se-3 kinare-y-se-2 pichhe-masala likhawat-safed gol-kinara"
    >
      Export
    </button>
  </div>
</section>

🧩 Core Concept

Instead of writing CSS:

.card {
  padding: 16px;
  background: brown;
  border-radius: 8px;
}

You compose utilities:

<div chaiCss="kinare-se-4 pichhe-chai gol-kinara"></div>

Each token is a utility that does one thing.

🏗️ How It Works

chaiUi follows a simple pipeline:

[chaiCss] → Parser → Resolver → Apply → DOM

1. Parser → splits utility tokens
2. Resolver → maps tokens to styles
3. Apply → applies styles using element.style

🧱 Utility Categories (V1)

chaiUi provides a minimal, focused set of utilities:

📦 Layout

• lacheela → display: flex
• lacheela-kolam → flex-direction: column
• saman-beech → align-items: center
• beech-mein → justify-content: center
• dono-kinare → justify-content: space-between

Compatibility aliases: flex, flex-col, items-center, justify-center, justify-between

📏 Spacing

• kinare-se-* → padding (example: kinare-se-2)
• kinare-x-se-*, kinare-y-se-* → horizontal/vertical padding
• bahar-se-* → margin
• upar-se-*, niche-se-* → top/bottom margin
• baaye-se-*, daaye-se-* → left/right margin
• fasla-* → gap

Compatibility aliases (still supported): p-*, m-*, px-*, py-*, mx-*, my-*, gap-*

Scale: 1 = 4px

Example:

<div chaiCss="kinare-se-2 upar-se-2 fasla-2"></div>

🎨 Colors (Chai Theme ☕)

• pichhe-chai, pichhe-cream, pichhe-masala
• likhawat-chai, likhawat-masala, likhawat-safed

Compatibility aliases: bg-chai, bg-cream, bg-masala, text-chai, text-masala, text-white

✍️ Typography

• akshar-chhota, akshar-samanya, akshar-bada, akshar-xl
• font-patla, font-mota
• likhawat-beech, likhawat-baaye, likhawat-daaye

Compatibility aliases: text-sm, text-base, text-lg, text-xl, font-light, font-bold, text-center, text-left, text-right

🔲 Borders & Radius

• kinara-rekha
• gol-kinara, gol-kinara-2, poora-gola

Compatibility aliases: border, rounded, rounded-2, rounded-full

🌫️ Effects (Chai Identity 🔥)

• chai-parchai
• halki-parchai
• sheesha-chai

Compatibility aliases: chai-shadow, soft-shadow, glass-chai

📐 Size

• chaudai-poori, unchai-poori
• chaudai-screen, unchai-screen

Compatibility aliases: w-full, h-full, w-screen, h-screen

🧱 Display

• dikhao, chhupao

Compatibility aliases: block, hidden

☕ Chai Design Philosophy

chaiUi is not just utilities — it has a personality:

• Warm colors
• Soft shadows
• Cozy UI feel
• Minimal and expressive

“Build interfaces that feel like a cup of chai.”

⚠️ What’s NOT Included (V1)

To keep things simple and focused:

• ❌ No hover states
• ❌ No responsive utilities
• ❌ No animations
• ❌ No components (button, card, etc.)

chaiUi focuses purely on utilities.

🧠 Philosophy

chaiUi follows the principle:

“Don’t give components. Give building blocks.”

Instead of prebuilt UI, you compose everything using utilities.