Discord Components screenshot

Discord Components

Author Avatar Theme by Skyra project
Updated: 19 May 2025
289 Stars

Discord Webcomponents for real looking messages on the web

Categories

Overview:

Discord Components is a set of web components designed to facilitate the creation and display of fake Discord messages on webpages. These components offer a design inspired by Discord itself, supporting dark and light themes, various customization options for message authors, and complete embed support. The library provides an easy-to-use syntax for integrating these components into websites.

Features:

  • Design Modeled after Discord: Components designed to resemble Discord messages.
  • Comfy and Compact Mode Support: Options for displaying messages in different layouts.
  • Dark and Light Themes Support: Ability to switch between dark and light themes.
  • Customizable Message Display: Set message author’s username, avatar, role color, and “bot” tag status.
  • Support for User, Role, and Channel Mentions: Easily display fake mentions within messages.
  • Complete Embed Support: Fully supports embedding content within messages.
  • Lit Element Integration: Uses Lit Element to ensure compatibility with all browsers and environments.
  • Simple Syntax: Easy-to-use syntax for incorporating components into webpages.

Installation:

To install Discord Components, you can use npm:

npm install discord-components

For React bindings, you can install the package ‘@skyra/discord-components-react’:

npm install @skyra/discord-components-react

Summary:

Discord Components offer a convenient solution for developers looking to simulate Discord messages on their webpages. With features such as theme support, customizable message display, and easy integration, this library provides a seamless experience for creating fake conversations. The availability of React bindings and compatibility across various frameworks further enhance its utility for web development projects.