Discord messages.
Without screenshots.

import React, { useState, useEffect } from "react";
import { DiscordUI, Message } from "@arcscord/discord-ui";
import "@arcscord/discord-ui/styles.css";

const previewTheme = "dark";

const announcement = {
  "id": "launch",
  "author": {
    "id": "demo-bot",
    "displayName": "Community Bot",
    "bot": true,
    "color": "#a7a9ff",
    "avatarFallback": {
      "background": "#6055a8",
      "letter": "A"
    }
  },
  "timestamp": "2026-11-01T10:00:00Z",
  "body": {
    "kind": "components-v2",
    "components": [
      {
        "id": "launch-card",
        "kind": "container",
        "accentColor": "#a7a9ff",
        "components": [
          {
            "id": "title",
            "kind": "text-display",
            "content": "## Your next adventure starts here.\nNew places. Familiar faces. A whole community to explore."
          },
          {
            "id": "cover",
            "kind": "media-gallery",
            "items": [
              {
                "id": "cover-image",
                "url": "/examples/landscape.svg",
                "alt": "An illustrated mountain landscape"
              }
            ]
          },
          {
            "id": "details",
            "kind": "text-display",
            "content": "**Community night · Friday, 18:00 UTC**\nBring your friends. We’ll bring the quests."
          },
          {
            "id": "actions",
            "kind": "action-row",
            "buttons": [
              {
                "id": "explore",
                "kind": "link-button",
                "label": "Build a message like this",
                "url": "https://ui.arcscord.dev/playground?example=announcement"
              }
            ]
          }
        ]
      }
    ]
  }
};

const Example = (function AnnouncementExample({ theme }) {
  const [message, setMessage] = useState(announcement);
  useEffect(() => {
    const url = new URL("/playground?example=announcement&theme=" + theme, window.location.origin).href;
    setMessage({ ...announcement, body: { ...announcement.body, components: announcement.body.components.map(card => ({
      ...card, components: card.components.map(component => component.kind === "action-row"
        ? { ...component, buttons: component.buttons.map(button => ({ ...button, url })) }
        : component),
    })) } });
  }, [theme]);
  return <Message message={message} />;
});

export default function Preview({ theme = previewTheme } = {}) {
  return (
    <DiscordUI theme={theme} locale="en-US" timeZone="UTC"
      entities={{"users":{"123456789012345678":{"name":"Inès"}}}}>
      <Example theme={theme} />
    </DiscordUI>
  );
}