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

Slack Chat Mockup is a Framer code component that 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.

Check out the live demo here: https://slackchat.framer.website

You add messages in the property panel: name, avatar, time, text, optional attachment, reactions and thread replies. The component renders them exactly 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.

SlackChatMockup.tsx - drop straight into Framer, no setup needed

Setup guide with step by step instructions

Unlimited messages with name, avatar or initials, time, text, attachment image, reactions, thread replies, app tag and highlight

Slack formatting: bold, italic, strikethrough, inline code, @mentions, #channels, emoji shortcodes and links

Editable workspace name, channel, topic, members, date divider, sidebar channels and DMs

Typing animation: messages appear one by one with typing dots, 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

Everything is drawn with code, so it matches your fonts and colors and stays sharp on retina screens

Reduced motion support, no external dependencies, works on every Framer plan

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.

Framer

Works with any Framer template

One-time purchase. Use on unlimited personal and client projects. Slack is a trademark of Slack Technologies; this is an independent mockup component and is not affiliated with Slack.

Due to the digital nature of this product, all sales are final. Once the file has been downloaded, refunds are not offered.

However, if you experience a technical issue that prevents the component from working as described, please reach out within 14 days of purchase and I will do my best to resolve it. If the issue cannot be fixed, a full refund will be provided. For questions, contact: info@zo-e.nl