ChaiUI ☕

ChaiUI is a tiny, zero-dependency styling helper that applies styles at runtime based on small, expressive utility and component classes prefixed with chai-.

Instead of writing CSS files, include index.js and call applyChaiStyles() (or let it run on DOMContentLoaded) — the script scans the DOM for chai- classes and applies inline styles to demonstrate a lightweight utility/component system.

Install

npm install chai-ui

Quick Start

import { applyChaiStyles } from 'chai-ui';

// Apply styles to the current document
applyChaiStyles();

Or include index.js in a script tag — the playground shipped with the repo will also wire applyChaiStyles() on DOMContentLoaded so components render automatically.

What this library provides

• Utility-style classes for spacing, typography, layout and simple helpers.
• Small, opinionated components: card, button, avatar, progress bar, table, dropdown, modal, hover/animation helpers.
• A live playground (index.html) that lets you toggle classes and open a full-page preview to see how selected classes affect a real page layout.

Classes and behavior

Utilities (pattern: chai-<type>-<value>)

• chai-p-<n> — padding in px (e.g. chai-p-10 sets padding: 10px)
• chai-m-<n> — margin in px (e.g. chai-m-20)
• chai-bg-<color> — background color (accepts hex or named colors)
• chai-text-center — text-align: center
• chai-text-<color> — set text color (e.g. chai-text-red)
• chai-fs-<n> — font-size in px (e.g. chai-fs-24)
• chai-border-<n> — border width in px (solid black)
• chai-rounded-<n> — border-radius in px
• chai-flex — display: flex
• chai-items-center — align-items: center (works with chai-flex)
• chai-justify-center — justify-content: center
• chai-gap-<n> — gap in px between flex children

Components (use the class directly)

• chai-card — padded card with soft background, rounded corners and shadow
• chai-btn — primary button styling (padding, background, color, radius)
• chai-btn-danger — danger modifier (red background)
• chai-avatar — circular 60x60 image styles
• chai-progress — simple progress track (script appends inner bar to animate width)
• chai-table — table reset + cell padding and header background
• chai-dropdown — container positioning for dropdowns
• chai-dropdown-menu — absolute positioned dropdown menu (hidden by default)
• chai-modal — full-screen centered overlay (hidden by default)
• chai-modal-content — modal inner content box

Hover & animation helpers

• chai-hover-scale — scales element on hover using transform
• chai-animate-fade — fade-in animation on load (opacity transition)

Helpers

• openModal() / closeModal() — convenience helpers used by the demo modal in the playground.
• showToast(msg) — shows a small toast message in bottom-right.
• setProgress(el, value) — sets the inner width of a chai-progress bar to the given percentage.

Playground

Open index.html in the repo. It contains an interactive playground where you can:

• Search and toggle utility or component classes in a left-hand panel
• See a live sample update in the right-hand preview
• Copy the generated HTML or open a full-page preview that applies the selected classes to a simple layout

Notes & limitations

• This library applies styles at runtime via inline styles — it is intended as a lightweight demo/utility system and not a replacement for a full CSS framework.
• Some class patterns (like chai-bg-<value> and chai-text-<value>) expect simple color tokens; advanced CSS values may require extension.
• chai-progress appends an inner bar element when applied; calling applyChaiStyles() multiple times may create duplicates if the element already contains children.