discord-components

• Purpose: Discord Components is a library that provides web components to easily build and display fake Discord messages on webpages. It's designed to mimic Discord's UI for various use cases like documentation, tutorials, or demonstrations.

• Key Features:

  • Models Discord's design with support for both dark and light themes.
  • Supports compact and comfy message modes.
  • Customizable message authors (username, avatar, role color, bot tag).
  • Fake mentions (users, roles, channels) and complete embed support.
  • Built with Lit Element for broad browser compatibility.
  • Simple syntax for quick integration.

• Target Audience: Developers looking to embed realistic Discord message UIs in their web projects, documentation, or tutorials.

• Framework Support:

  • Includes Svelte support (via Vite and SvelteKit integrations).
  • Also supports React, Vue, Angular, Solid, Astro, Qwik, Preact, HTMX, and vanilla JavaScript.

• Example Usage:

  <discord-messages>
    <discord-message author="User" avatar="blue">
      Hello, world!
    </discord-message>
  </discord-messages>
  

• Customization:

  • Avatar shortcuts (predefined colors) and custom avatar URLs.
  • Profile shortcuts for reusable author configurations.
  • Theming via CSS or inline styles.
  • TypeScript support with module augmentations.

• Live Demos: Available for all supported frameworks via StackBlitz links in the documentation.

For more details, visit the GitHub repository .