5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T7a5,

A realistic Slack channel you fully control, drawn with code so it stays crisp at any size.

Slack Chat Mockup shows a Slack conversation on your site: sidebar, channel header, messages with avatars, reactions, thread replies, attachments and a composer. Turn on the animation and the conversation plays out message by message, with typing dots and "Name is typing". No screenshots, no plugins, no backend.

What it does

You add messages in the property panel: name, avatar, time, text, optional attachment, reactions and thread replies. The component renders them like Slack does, including bold, italic, code, @mentions, #channels, emoji shortcodes and links. Messages from the same person are grouped, hovering shows the reaction bar, and the whole thing can animate on the published site when it scrolls into view.

Features

Unlimited messages with name, avatar or initials, time, text, attachment image, reactions, thread replies, app tag and highlight. Editable workspace name, channel, topic, members, date divider, sidebar channels and DMs. Typing animation with start in view or on load, delay, typing time, pause and loop. Light and dark theme, sidebar color, accent color, font, text size, radius, border and shadow. Toggle the window bar, sidebar, channel header and composer, so it also works as a narrow mobile version. Reduced motion support, no external dependencies, works on every Framer plan.

Who it's for

Founders, product marketers, agencies and Slack app builders who want to show a conversation, a support flow or a product story on their Framer site without pasting blurry screenshots.

License

One-time purchase for unlimited personal and client projects. Technical issue within 14 days? I will fix it or refund you. Questions: info@zo-e.nl. Slack is a trademark of Slack Technologies; this is an independent mockup component, not affiliated with Slack.

5b:[["$","$L5e",null,{"post":{"id":"01a07578-e679-75dc-84cf-65cfc2558e5d","title":null,"body":"

New component: Slack Chat Mockup. A realistic Slack channel drawn with code, with reactions, threads, a composer and a typing animation that plays the conversation message by message. Every message, name and color is yours to edit.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component: Slack Chat Mockup. A realistic Slack channel drawn with code, with reactions, threads, a composer and a typing animation that plays the conversation message by message. Every message, name and color is yours to edit."}]}]},"author":{"framerUserId":"7e4b2376-92d9-49df-8580-e3293af08a29","name":"Michelle de Haas | Zo-e","slug":"zo-e","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e4b2376-92d9-49df-8580-e3293af08a29/vdy1uebi","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bKajPZRq7uuS56ktIleU","resolved":true,"title":"Slack Chat Mockup","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A realistic Slack channel you fully control, drawn with code so it stays crisp at any size."}]},{"type":"paragraph","content":[{"type":"text","text":"Slack Chat Mockup shows a Slack conversation on your site: sidebar, channel header, messages with avatars, reactions, thread replies, attachments and a composer. Turn on the animation and the conversation plays out message by message, with typing dots and \"Name is typing\". No screenshots, no plugins, no backend."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"You add messages in the property panel: name, avatar, time, text, optional attachment, reactions and thread replies. The component renders them like Slack does, including bold, italic, code, @mentions, #channels, emoji shortcodes and links. Messages from the same person are grouped, hovering shows the reaction bar, and the whole thing can animate on the published site when it scrolls into view."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Unlimited messages with name, avatar or initials, time, text, attachment image, reactions, thread replies, app tag and highlight. Editable workspace name, channel, topic, members, date divider, sidebar channels and DMs. Typing animation with start in view or on load, delay, typing time, pause and loop. Light and dark theme, sidebar color, accent color, font, text size, radius, border and shadow. Toggle the window bar, sidebar, channel header and composer, so it also works as a narrow mobile version. Reduced motion support, no external dependencies, works on every Framer plan."}]},{"type":"customHeading","content":[{"type":"text","text":"Who it's for"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Founders, product marketers, agencies and Slack app builders who want to show a conversation, a support flow or a product story on their Framer site without pasting blurry screenshots."}]},{"type":"customHeading","content":[{"type":"text","text":"License"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"One-time purchase for unlimited personal and client projects. Technical issue within 14 days? I will fix it or refund you. Questions: info@zo-e.nl. Slack is a trademark of Slack Technologies; this is an independent mockup component, not affiliated with Slack."}]}]},"introduction":"Animated Slack chat, drawn in code","slug":"slack-chat-mockup","author":{"framerUserId":"7e4b2376-92d9-49df-8580-e3293af08a29","name":"Michelle de Haas | Zo-e","slug":"zo-e","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e4b2376-92d9-49df-8580-e3293af08a29/vdy1uebi","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e4b2376-92d9-49df-8580-e3293af08a29/01a07596-531f-737a-bdd5-34cc31d9794a.png","metadata":{"tint":{"h":285,"s":80,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-06T06:47:32.178Z","updatedAt":"2026-09-06T07:19:46.968Z","publishedAt":"2026-09-06T06:47:32.175Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://slackchat.framer.website","price":"6","paymentUrl":"https://contra.com/products/e9yh2zyn-slack-chat-mockup-framer-component","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"eZ9DEL5ZG7bdblxweiBw"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T06:47:32.729Z","updatedAt":"2026-09-06T06:47:32.729Z","reported":false}}],"$L60"]

Suggested for you