---
title: "Slack Chat Mockup — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Michelle de Haas | Zo-e · Cards. Slack Chat Mockup shows a Slack conversation on your site: sidebar, channel header, messages with avatars, reactions, thread…"
canonical: "https://framer.elliotli.dev/component/slack-chat-mockup"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Slack Chat Mockup

# Slack Chat Mockup

Animated Slack chat, drawn in code

[View on Framer](https://framer.com/marketplace/components/slack-chat-mockup/?via=elliot-li)

![Slack Chat Mockup preview image 1](https://framer.elliotli.dev/og/component/slack-chat-mockup/6b194f44d20d1295/1600x1200.jpg)

## Summary

Slack Chat Mockup shows a Slack conversation on your site: sidebar, channel header, messages with avatars, reactions, thread replies, attachments and a composer.

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4959

## Details

- **Author**: Michelle de Haas | Zo-e
- **Price**: $6.00
- **Published**: 2026-09-06
- **Updated**: 2026-09-16
- **Added**: 2026-09-06
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards