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.