Messaging Overview Split

Chat23: Messaging Overview Split

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.

Installation

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/chat23?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/chat23?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/chat23.tsx, the chat33 thread piece it floats on the tile (installed to components/beste/piece/chat33.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

The installed file exports chat23Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Chat23, chat23Demo } from "@/components/beste/block/chat23";

export default function MessagingPage() {
  return <Chat23 {...chat23Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Chat23 } from "@/components/beste/block/chat23";
import { Chat33 } from "@/components/beste/piece/chat33";

export default function MessagingPage() {
  return (
    <Chat23
      badge={{ label: "Messaging" }}
      heading="The conversation lives on the record, not in someone's inbox"
      description="Every word sits against the member it belongs to."
      stats={[
        { value: "11 min", label: "median first reply inside clinic hours" },
        { value: "0", label: "messages lost between shifts" },
      ]}
      buttons={[
        { label: "See messaging", href: "/product/messaging" },
        { label: "Book a demo", href: "/demo" },
      ]}
      media={
        <Chat33
          name="Care team"
          status="Online"
          items={[
            { from: "them", text: "Rowan's intake is ready for review." },
            { from: "me", text: "Approved. Book the first session for Wednesday." },
          ]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Stat = {
  value: string;
  label: string;
};

Behavior notes

• The stats are a real dl where the figure is the dt and its explanation the dd, laid out as a fixed 7rem track beside the label from sm up so every figure starts on the same left edge.
• Below sm the grid collapses and the label stacks under its figure, which keeps long labels from squeezing the number.
• Rows are sm:items-baseline, so the large figure and its small label sit on a shared baseline rather than being centered against each other.
• Figures use tabular-nums, so the column stays optically aligned across different digit counts.
• Rows carry border-t with no closing rule, so the table flows into the actions below it.
• The layout is lg:grid-cols-2 with lg:items-center, so the tile stays centered against a copy column whose height varies with the number of stats.
• Button tones are positional and not overridable: the first is primary, later ones are outline.