Chat Card
The new landing page is live!
Already? That was two days of work at most
Blocks. It is all blocks.
The new landing page is live!
Already? That was two days of work at most
Blocks. It is all blocks.
A chat conversation card with message bubbles and a typing indicator for testimonials and support sections.
The import and the props worth knowing about, in one place.
import { Card22 } from "@/components/beste/component/card22";
<Card22
name="Selin Aksoy"
status="online"
src="/avatars/selin.jpg"
messages={[
{ from: "them", text: "The new landing page is live!" },
{ from: "me", text: "Already? That was two days at most" },
]}
typing // show the bouncing typing indicator
/>
<Card22
messages={[
{ from: "them", text: "Can you send the invoice?" },
{ from: "me", text: "Done, check your inbox" },
]}
tone="emerald" // your bubbles: "primary" (default) | "emerald" | "dark"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Contact name in the header |
status | string | — | Muted status line under the name (e.g. "online") |
src | string | — | Contact avatar URL |
messages* | Card22Message[] | — | The conversation, in order |
typing | boolean | — | Show a typing indicator bubble at the end |
tone | "primary" | "emerald" | "dark" | — | Color of your own bubbles |
className | string | — | Additional classes merged onto the root |
We rebuilt our marketing site in a weekend. The blocks are clean, accessible, and the code reads like we wrote it ourselves.
A new themed set of sections lands every month, with free updates forever.
Learn more