discord-components icon indicating copy to clipboard operation
discord-components copied to clipboard

Discord Webcomponents for real looking messages on the web

Discord Components

Fake Discord messages for the web

License Patreon

npm npm

Support Server


Table of Contents

  • Discord Components
    • Description
    • Features
    • Demos
      • Angular
      • React
      • Vue
      • No Framework
    • Screenshots
      • Dark Mode
      • Light Mode
    • Contributors ✨

Description

Discord message components to easily build and display fake Discord messages on your webpage.

This is an adaptation of wc-discord-message from Danktuary

Features

  • Design modelled after Discord itself
  • Comfy and compact mode support
  • Dark and light themes support
  • Set the message author's username, avatar (use defaults or provide your own), role color, and "bot" tag status
  • Display fake user, role, and channel mentions
  • Complete embed support
  • Simple syntax!

Demos

Angular

Edit Button

React

Create React App

Edit Button

NextJS

Edit Button

Vue

Edit Button

No Framework

Edit Button

Screenshots

Dark Mode

A normal conversation

Compact mode

With an embed

Light Mode

A normal conversation

Compact mode

With an embed

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Jeroen Claassens

💻 📖 💡 📆

depfu[bot]

🚧

dependabot[bot]

🚧

Noel

💻 🐛 🎨

Snazzah

💻

DarkGuy10

💻

This project follows the all-contributors specification. Contributions of any kind welcome!