UI Components

Full option set with 2–4 live examples per variant — buttons, badges, cards, forms, modals, toasts, pagination.

Buttons

.btn + variants

1. Color variants (4)

btn-primary · btn-violet · btn-secondary · btn-ghost

2. Sizes (3)

text-[10px] py-1 · text-xs py-2 · text-sm py-2.5

3. With icons (4)

4. States & width (3)

Badges

.badge + variants

1. Color options (5)

Primary Violet Success Amber Danger

2. Status examples (4)

Running Scheduled Completed Failed

3. Channel / plan examples (4)

WhatsApp Email SMS Enterprise

4. In-row usage (3)

Inbound Qualification Bot Online

CloudCorp · Deal #4821 Negotiation

Webhook delivery retry Error

Cards

4 card patterns

1. Surface / glow / bordered / promo (4)

Glass Card

Default panel for tables, settings, and lists.

card-dark

Glow Card

Soft radial wash for hero or promo blocks.

card-dark card-glow

Highlighted

Accent border for featured plans or active tiles.

border-accent-blue

Promo

Upgrade Banner

Marketing callout inside the admin shell.

2. KPI neon cards (4)

12.4k

Conversations

+14%

1,248

New Leads

+9%

$84k

Revenue

+22%

96.2%

Bot Accuracy

+3%

Form Controls

.input-control

1. Text fields (4)

Full Name

Work Email

Password

2. Select / textarea / checks (4)

Plan

Priority

Notes

Remember me for 30 days Send welcome email Public workspace Private workspace

Modals

4 examples

Open with openModal(id) — same shell as CRM dialogs.

Info

Message + badges + dual actions

Form

Inputs + select + save footer

Confirm

Destructive delete pattern

Large

Wide multi-column content

Toasts

4 types

Trigger with showToast({ title, message, type }).

success Changes saved

info Sync complete

warning Latency elevated

error Cluster unreachable

Pagination

3 examples

1. First page (Prev disabled)

Showing 1 to 8 of 1,248 leads

...

2. Mid page (active = 2)

Showing 9 to 16 of 1,248 leads

...

3. Last page (Next disabled)

Showing 1,241 to 1,248 of 1,248 leads

...