Crafter Station

WhatsApp Components

Copy-paste chat components for shadcn. Real WhatsApp tokens, three themes, React 19 — no runtime package.

npx shadcn@latest add https://whatsapp-components.crafter.run/r/whatsapp-kit.json

Selling over WhatsApp, in three themes

One ChatItem[], three values of data-wa-theme. Nothing below changes but the tokens.

Perfume Violeta — WhatsApp Light
data-wa-theme="light"

Rich content

Photos, voice notes, documents, locations, unfurled links, quoted replies and reactions. Quoting and reacting live on the message envelope, not on the content — so they work the same whatever the bubble holds.

Camila

typing…

¿Es este el que tienen?6:12 p.m.

Camila📷 Foto

¡Ese mismo! Te mando la ficha 👇36:14 p.m.

PDFficha-violeta-50ml.pdf3 pages · PDF · 486 kBNotas olfativas y duración.6:15 p.m.

0:276:18 p.m.

Violeta · Perfumería artesanalFragancias en pequeños lotes. Envíos el mismo día dentro de la ciudad.crafter.runTe dejo la tienda por si quieres pasar 🙂6:20 p.m.

Violeta · MirafloresAv. La Paz 1043, Lima6:21 p.m.

Camila

typing…

¿Es este el que tienen?6:12 p.m.

Camila📷 Foto

¡Ese mismo! Te mando la ficha 👇36:14 p.m.

PDFficha-violeta-50ml.pdf3 pages · PDF · 486 kBNotas olfativas y duración.6:15 p.m.

0:276:18 p.m.

Violeta · Perfumería artesanalFragancias en pequeños lotes. Envíos el mismo día dentro de la ciudad.crafter.runTe dejo la tienda por si quieres pasar 🙂6:20 p.m.

Violeta · MirafloresAv. La Paz 1043, Lima6:21 p.m.

Interactive

Quick replies, list messages, CTAs and polls. All controlled — no component holds hidden state, so the transcript stays yours.

Catálogo VioletaEstos son los formatos disponibles esta semana.Precios con IVA incluido.11:04 a.m.

¿Tienen el de 50 ml en stock?11:06 a.m.

¿Qué aroma lanzamos primero?Elige una80 votos

Tokens

WhatsApp Light

The real thing. Sampled from WhatsApp Web.

--wa-bg: #efeae2
--wa-panel: #f0f2f5
--wa-panel-text: #111b21
--wa-panel-muted: #667781
--wa-bubble-in: #ffffff
--wa-bubble-out: #d9fdd3
--wa-bubble-in-text: #111b21
--wa-bubble-out-text: #111b21
--wa-surface: #ffffff
--wa-text: #111b21
--wa-text-muted: #667781
--wa-link: #027eb5
--wa-tick: #667781
--wa-tick-read: #53bdeb
--wa-online: #25d366
--wa-accent: #00a884
--wa-accent-text: #ffffff
--wa-system-bg: #ffffff
--wa-system-text: #54656f

WhatsApp Dark

The real thing, after hours.

--wa-bg: #0b141a
--wa-panel: #202c33
--wa-panel-text: #e9edef
--wa-panel-muted: #8696a0
--wa-bubble-in: #202c33
--wa-bubble-out: #005c4b
--wa-bubble-in-text: #e9edef
--wa-bubble-out-text: #e9edef
--wa-surface: #111b21
--wa-text: #e9edef
--wa-text-muted: #8696a0
--wa-link: #53bdeb
--wa-tick: #8696a0
--wa-tick-read: #53bdeb
--wa-online: #25d366
--wa-accent: #00a884
--wa-accent-text: #111b21
--wa-system-bg: #182229
--wa-system-text: #8696a0

Brand

Rounder corners, deeper teal. For product shots and landings.

--wa-bg: #ece7df
--wa-panel: #075e54
--wa-panel-text: #ffffff
--wa-panel-muted: #a7d5cd
--wa-bubble-in: #ffffff
--wa-bubble-out: #d9f8c4
--wa-bubble-in-text: #1a1a1a
--wa-bubble-out-text: #1a1a1a
--wa-surface: #f4fbef
--wa-text: #1a1a1a
--wa-text-muted: #8b8b8b
--wa-link: #075e54
--wa-tick: #8b8b8b
--wa-tick-read: #34b7f1
--wa-online: #25d366
--wa-accent: #f2e04f
--wa-accent-text: #1f3d2b
--wa-system-bg: #ffffff
--wa-system-text: #1e8e3e