A messaging section splitting a hairline matrix between the staff view and the member view, each half floating its own live asset above a title and a list of what that side gets.
A messaging section splitting a hairline matrix between the staff view and the member view, each half floating its own live asset above a title and a list of what that side gets.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/chat31?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/chat31?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/chat31.tsx, the browser35 and chat33 pieces it floats one per side (installed to components/beste/piece/{name}.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.
The installed file exports chat31Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Chat31, chat31Demo } from "@/components/beste/block/chat31";
export default function MessagingPage() {
return <Chat31 {...chat31Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Browser35 } from "@/components/beste/piece/browser35";
import { Chat31 } from "@/components/beste/block/chat31";
import { Chat33 } from "@/components/beste/piece/chat33";
export default function MessagingPage() {
return (
<Chat31
badge={{ label: "Both sides" }}
heading="The same conversation, seen from two chairs"
description="Your team gets the record and the history. The member gets one link."
staff={{
kicker: "What your team sees",
title: "The thread, on the record",
description: "Everything the member has ever asked, sitting against their appointments.",
points: ["Full history without leaving the record", "Saved replies that fill themselves in"],
media: (
<Chat33
name="Rowan Blake"
status="Waiting on us"
items={[{ from: "them", text: "Could I move Wednesday to the afternoon?" }]}
/>
),
image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
}}
member={{
kicker: "What the member sees",
title: "One link, no account",
description: "A page with the room, the clinician, and what to bring on it.",
points: ["Nothing to install and nothing to log into", "Move or cancel without ringing"],
media: (
<Browser35
time="09:41"
title="Appointment"
status="Moved"
headline="Wednesday, 14 May · 15:15"
rows={[{ label: "With", value: "Dr Amelia Frost" }]}
/>
),
image: { src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" },
}}
closing="Four messages, one afternoon, and nobody had to explain the situation twice."
button={{ label: "See messaging end to end", href: "/product/messaging" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
staff | Side | – | The left half, showing the internal view |
member | Side | – | The right half, showing the customer view |
closing | string | – | Paragraph beside the closing action |
button | { label: string; href: string } | – | Closing action |
className | string | – | Extra classes for the outer section |
type ActionLink = {
label: string;
href: string;
};
type TileImage = {
src: string;
alt: string;
};
type Side = {
kicker: string;
title: string;
description: string;
points: string[];
media: ReactNode;
image?: TileImage;
};Side shape, which is what keeps the two columns visually symmetrical: same kicker, same title scale, same list treatment, with only the asset and the copy differing.gap-px over a bg-border container with bg-card cells, and the container's overflow-hidden clips the corners so it reads as one panel.border-t with no closing rule, so each list flows into the card's own padding rather than closing itself off.flex flex-col, so a pair with different amounts of copy still fills the row evenly.lg:grid-cols-2 only, so the two halves stack full width on tablet, where side by side would squeeze both tiles.chat23
A messaging section pairing a light heading, a hairline table of response figures, and two actions with an image tile that floats a live conversation thread.
chat22
A two-pane messaging panel: a selectable conversation list with unread dots on the left, and the chosen thread on the right with member and staff bubbles, timestamps, and a composer row.
chat14
Compare responses from two different AI models side by side. Features a shared prompt input, dual response panels with model badges, and rating buttons for each response.
chat12
Chat message thread with rich formatting, copy and thumbs-up/down action buttons on AI messages, and time-grouped message sections. Features hover-revealed action bars and smooth animations.