Skip to main content
The Chat SDK adapter renders Card elements into styled HTML emails using @react-email/components. This lets you send structured, branded messages without writing raw HTML.

​
Card structure

A card has a type, title, optional subtitle, and children array. Children can be text blocks, dividers, link buttons, or action groups. 
import type { CardElement } from 'chat';

const card: CardElement = {
  type: 'card',
  title: 'Order Confirmed',
  subtitle: 'Order #1234',
  children: [
    { type: 'text', content: 'Your order has been shipped.' },
    { type: 'divider' },
    {
      type: 'actions',
      children: [
        {
          type: 'link-button',
          label: 'Track Order',
          url: 'https://example.com/track/1234',
        },
      ],
    },
  ],
};

​
Child element types

TypeFieldsDescription
textcontentPlain text paragraph
divider—Horizontal rule
link-buttonlabel, urlClickable button that opens a URL
actionschildrenContainer for link buttons

​
Sending a card

Pass the card object and a fallbackText string to thread.post(). The fallback is used by email clients that don’t render HTML. 
chat.onNewMention(async (thread, message) => {
  await thread.subscribe();
  await thread.post({
    card: {
      type: 'card',
      title: 'Welcome!',
      subtitle: 'Thanks for reaching out',
      children: [
        {
          type: 'text',
          content: "Hi! Thanks for emailing us. We'll get back to you shortly.",
        },
        { type: 'divider' },
        {
          type: 'actions',
          children: [
            {
              type: 'link-button',
              label: 'Visit our website',
              url: 'https://resend.com',
            },
          ],
        },
      ],
    },
    fallbackText: 'Welcome! Thanks for reaching out.',
  });
});
Always include fallbackText. Some email clients strip HTML entirely, and the fallback text is what recipients will see in that case.

​
Try it yourself

Welcome Cards Example

Full working example that sends a styled card on first contact