{"id":13467153,"url":"https://github.com/skyra-project/discord-components","last_synced_at":"2025-05-15T01:07:54.512Z","repository":{"id":37015086,"uuid":"262846052","full_name":"skyra-project/discord-components","owner":"skyra-project","description":"Discord Webcomponents for real looking messages on the web","archived":false,"fork":false,"pushed_at":"2025-05-11T11:45:22.000Z","size":29333,"stargazers_count":287,"open_issues_count":9,"forks_count":43,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-11T12:29:40.002Z","etag":null,"topics":["angular","astro","discord","docusaurus","lit","nextjs","nuxt","qwik","react","solid","svelte","sveltekit","vitepres","vue","webcomponents"],"latest_commit_sha":null,"homepage":"https://discord-components.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skyra-project.png","metadata":{"funding":{"github":["kyranet","favna"],"patreon":"kyranet","open_collective":null,"ko_fi":"kyranet","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://donate.skyra.pw/paypal","https://donate.favware.tech/paypal"]},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-10T18:04:19.000Z","updated_at":"2025-05-11T11:45:25.000Z","dependencies_parsed_at":"2024-03-24T02:36:50.949Z","dependency_job_id":"c7b82a8f-81ee-45ef-aab2-86fdb8187533","html_url":"https://github.com/skyra-project/discord-components","commit_stats":{"total_commits":867,"total_committers":23,"mean_commits":37.69565217391305,"dds":"0.44636678200692037","last_synced_commit":"4194258426bcc29d1c6707df8f12fb0290728628"},"previous_names":[],"tags_count":109,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyra-project%2Fdiscord-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyra-project%2Fdiscord-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyra-project%2Fdiscord-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyra-project%2Fdiscord-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skyra-project","download_url":"https://codeload.github.com/skyra-project/discord-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254041,"owners_count":22039792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","astro","discord","docusaurus","lit","nextjs","nuxt","qwik","react","solid","svelte","sveltekit","vitepres","vue","webcomponents"],"created_at":"2024-07-31T15:00:53.632Z","updated_at":"2025-05-15T01:07:49.504Z","avatar_url":"https://github.com/skyra-project.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kyranet","https://github.com/sponsors/favna","https://patreon.com/kyranet","https://ko-fi.com/kyranet","https://donate.skyra.pw/paypal","https://donate.favware.tech/paypal"],"categories":["Misc Resources"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Discord Components\n\n\u003c!-- # HEADER START # --\u003e\n\n**Web components to easily build and display fake Discord messages on your\nwebpages**\n\n[![License](https://img.shields.io/github/license/skyra-project/discord-components?logo=github\u0026maxAge=3600\u0026style=flat-square)](https://github.com/skyra-project/discord-components/blob/main/LICENSE.md)\n[![Patreon](https://img.shields.io/badge/donate-patreon-F96854.svg?logo=patreon)](https://donate.skyra.pw/patreon)\n\n_Core Package_\n\n[![npm](https://img.shields.io/npm/v/@skyra/discord-components-core?color=crimson\u0026logo=npm\u0026style=flat-square\u0026label=@skyra/discord-components-core)](https://www.npmjs.com/package/@skyra/discord-components-core)\n[![npm](https://img.shields.io/npm/dt/@skyra/discord-components-core.svg?maxAge=3600\u0026logo=npm)](https://www.npmjs.com/package/@skyra/discord-components-core)\n[![npm](https://img.shields.io/bundlephobia/min/@skyra/discord-components-core?label=minified\u0026logo=webpack\u0026maxAge=3600)](https://bundlephobia.com/result?p=@skyra/discord-components-core)\n\n_React Bindings_\n\n[![npm](https://img.shields.io/npm/v/@skyra/discord-components-react?color=crimson\u0026logo=npm\u0026style=flat-square\u0026label=@skyra/discord-components-react)](https://www.npmjs.com/package/@skyra/discord-components-react)\n[![npm](https://img.shields.io/npm/dt/@skyra/discord-components-react.svg?maxAge=3600\u0026logo=npm)](https://www.npmjs.com/package/@skyra/discord-components-react)\n[![npm](https://img.shields.io/bundlephobia/min/@skyra/discord-components-react?label=minified\u0026logo=webpack\u0026maxAge=3600)](https://bundlephobia.com/result?p=@skyra/discord-components-react)\n\n[![Support Server](https://discord.com/api/guilds/254360814063058944/embed.png?style=banner2)](https://join.skyra.pw)\n\n\u003c!-- # HEADER END # --\u003e\n\n\u003c/div\u003e\n\n---\n\n**_Table of Contents_**\n\n\u003c!-- # TOC START # --\u003e\n\n- [Discord Components](#discord-components)\n  - [Description](#description)\n    - [Upgrading guide](#upgrading-guide)\n  - [Features](#features)\n  - [Usage](#usage)\n    - [Using the Discord font](#using-the-discord-font)\n    - [Integrations](#integrations)\n      - [Angular](#angular)\n        - [Important Notes](#important-notes)\n        - [Live Demo](#live-demo)\n      - [React](#react)\n        - [Important Notes](#important-notes-1)\n        - [Vite](#vite)\n          - [Live Demo](#live-demo-1)\n        - [Create React App](#create-react-app)\n          - [Important Notes](#important-notes-2)\n        - [NextJS](#nextjs)\n          - [Live Demo Pages Directory](#live-demo-pages-directory)\n          - [Live Demo App Directory](#live-demo-app-directory)\n          - [Known limitations](#known-limitations)\n        - [Docusaurus](#docusaurus)\n          - [Live Demo](#live-demo-2)\n      - [Vue](#vue)\n        - [Vite](#vite-1)\n          - [Live Demo](#live-demo-3)\n          - [Configuration](#configuration)\n        - [Nuxt](#nuxt)\n          - [Live Demo](#live-demo-4)\n          - [Configuration](#configuration-1)\n      - [Astro](#astro)\n        - [Important Notes](#important-notes-3)\n        - [Live Demo](#live-demo-5)\n      - [Solid](#solid)\n        - [Live Demo](#live-demo-6)\n      - [Svelte](#svelte)\n        - [Vite](#vite-2)\n          - [Live Demo](#live-demo-7)\n        - [Sveltekit](#sveltekit)\n          - [Live Demo](#live-demo-8)\n      - [Qwik](#qwik)\n        - [Live Demo](#live-demo-9)\n      - [Preact](#preact)\n        - [Live Demo](#live-demo-10)\n      - [HTMX](#htmx)\n        - [Live Demo](#live-demo-11)\n      - [No Framework](#no-framework)\n        - [Important Notes](#important-notes-4)\n        - [Live Demo](#live-demo-12)\n  - [Notes](#notes)\n    - [TypeScript module augments](#typescript-module-augments)\n    - [Avatar shortcuts](#avatar-shortcuts)\n    - [Profile shortcuts](#profile-shortcuts)\n    - [Theming](#theming)\n    - [Components notes](#components-notes)\n      - [discord-messages component](#discord-messages-component)\n      - [discord-mention component](#discord-mention-component)\n      - [discord-embed component](#discord-embed-component)\n      - [discord-embed-fields component](#discord-embed-fields-component)\n      - [discord-embed-field component](#discord-embed-field-component)\n  - [Screenshots](#screenshots)\n    - [Dark Mode](#dark-mode)\n    - [Light Mode](#light-mode)\n  - [Contributors](#contributors)\n\n\u003c!-- # TOC END # --\u003e\n\n\u003c!-- # DESCRIPTION START # --\u003e\n\n## Description\n\nDiscord message components to easily build and display fake Discord messages on\nyour webpage.\n\n**This is an adaptation of [wc-discord-message] from [Danktuary]**\n\n### Upgrading guide\n\nThe source code and documentation of this package has been updated for version\n4.x of this package. To find out how to upgrade from v3.x to v4.x, please refer\nto the\n[upgrading guide](https://discord-components.js.org/upgrading/v3x-v4x/#component-changes)\n\n\u003c!-- # DESCRIPTION END # --\u003e\n\n\u003c!-- # FEATURES START # --\u003e\n\n## Features\n\n- Design modelled after [Discord](https://discord.com/) itself\n- Comfy and compact mode support\n- Dark and light themes support\n- Set the message author's username, avatar (use defaults or provide your own),\n  role color, and \"bot\" tag status\n- Display fake user, role, and channel mentions\n- Complete embed support\n- Uses [Lit Element][lit] to support all browsers and environments\n- Simple syntax!\n\n\u003c!-- # FEATURES END # --\u003e\n\n\u003c!-- # CORE_USAGE START # --\u003e\n\n## Usage\n\nThe syntax is kept fairly simple. Here's a basic example of a regular\nconversation:\n\n```html\n\u003cdiscord-messages\u003e\n  \u003cdiscord-message\n    \u003eHey guys, I'm new here! Glad to be able to join you all!\u003c/discord-message\n  \u003e\n  \u003cdiscord-message author=\"Dawn\" avatar=\"red\"\u003e\n    Hi, I'm new here too!\n  \u003c/discord-message\u003e\n  \u003cdiscord-message\n    author=\"Favna\"\n    avatar=\"https://github.com/favna.png\"\n    roleColor=\"#ff0000\"\n  \u003e\n    Hey, \u003cdiscord-mention\u003eUser\u003c/discord-mention\u003e and\n    \u003cdiscord-mention\u003eDawn\u003c/discord-mention\u003e. Welcome to our server!\n  \u003c/discord-message\u003e\n\u003c/discord-messages\u003e\n```\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e For further examples on how to use components, please refer to the Stackblitz\n\u003e examples linked below. Choose the framework you are using and click on the\n\u003e \"Open in Stackblitz\" button to see the code and how it renders in the browser.\n\n### Using the Discord font\n\nThis library can use the Discord font if you load it into your project. You can\ndo so by including the CSS below:\n\n```css\n@font-face {\n  font-family: 'Whitney';\n  src: url('https://cdn.skyra.pw/whitney-font/v2/Book.woff') format('woff');\n  font-weight: 400;\n}\n\n@font-face {\n  font-family: 'Whitney';\n  src: url('https://cdn.skyra.pw/whitney-font/v2/Medium.woff') format('woff');\n  font-weight: 500;\n}\n\n@font-face {\n  font-family: 'Whitney';\n  src: url('https://cdn.skyra.pw/whitney-font/v2/Semibold.woff') format('woff');\n  font-weight: 600;\n}\n\n@font-face {\n  font-family: 'Whitney';\n  src: url('https://cdn.skyra.pw/whitney-font/v2/Bold.woff') format('woff');\n  font-weight: 700;\n}\n```\n\n### Integrations\n\n#### Angular\n\n##### Important Notes\n\nYou need to import the `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and add it\nto the `schemas` array of your module or component decorator for the module or\ncomponent using custom elements. This is to ensure that Angular knows custom\nelements are used in this module or component.\n\n```ts\nimport { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';\n\n@Component({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppComponent {}\n```\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/angular)\n\n#### React\n\n##### Important Notes\n\nReact is currently the only library among the \"big\" libraries for frontend\ndevelopment that does not fully support custom elements / webcomponents yet (see\n[this React documentation page for more info](https://react.dev/reference/react-dom/components#custom-html-elements)).\nFor this reason we ship the package `@skyra/discord-components-react`.\n\nWe sincerely hope that this situation will improve in the future, but no one\nknows what their plans are.\n\n##### Vite\n\n###### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/react-vite-ts)\n\n##### Create React App\n\n###### Important Notes\n\nCreate React App is no longer the recommended way to start with a React app as\nper React's own documentation. We very strongly recommend using Vite instead.\n\n##### NextJS\n\n###### Live Demo Pages Directory\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts)\n\n###### Live Demo App Directory\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/nextjs-app-directory-ts)\n\n###### Known limitations\n\n1. All the React components will only render on the client, they are bundled\n   with the `'use client';` header that NextJS expects for CSR only components.\n   This is because there is currently no good way to render webcomponents on the\n   server. When\n   [@lit-labs/nextjs](https://www.npmjs.com/package/@lit-labs/nextjs) adds\n   [support for the app directory](https://github.com/lit/lit/issues/3657) we\n   can revisit this limitation.\n\n2. When using the app directory we are not able to get profiles working. We are\n   open to suggestions on how to fix this, ideally through a pull request to\n   [https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].\n\n##### Docusaurus\n\n###### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/react-docusaurus-ts)\n\n#### Vue\n\n##### Vite\n\n###### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/vue-vite-ts)\n\n###### Configuration\n\nWhen using Vue 3 with Vite you need to setup Vite to recognise the custom\ncomponents. You can do that with the following code in your `vite.config.ts`:\n\n```ts\nimport vue from '@vitejs/plugin-vue';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) =\u003e tag.startsWith('discord-')\n        }\n      }\n    })\n  ]\n});\n```\n\n##### Nuxt\n\n###### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/nuxt3-ts)\n\n###### Configuration\n\nWhen using Nuxt 3 you need to setup Vite to recognise the custom components. You\ncan do that with the following code in your `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n  devtools: { enabled: true },\n  vue: {\n    compilerOptions: {\n      isCustomElement: (tag) =\u003e tag.startsWith('discord-')\n    }\n  }\n});\n```\n\n#### Astro\n\n##### Important Notes\n\nBecause it is possible to use different integrations in an Astro project you can\nalso reference the other examples here. The live demo linked below uses the\n[Lit integration for Astro](https://docs.astro.build/en/guides/integrations-guide/lit/)\nas well as the\n[React integration for Astro](https://docs.astro.build/en/guides/integrations-guide/react/).\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/astro)\n\n#### Solid\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/solid-vite-ts)\n\n#### Svelte\n\n##### Vite\n\n###### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/svelte-vite-ts)\n\n##### Sveltekit\n\n###### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/sveltekit-ts)\n\n#### Qwik\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/qwik-vite-ts)\n\n#### Preact\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/preact-vite-ts)\n\n#### HTMX\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/htmx-vite-ts)\n\n#### No Framework\n\n##### Important Notes\n\nNote that while it is entirely possible to use this library without a framework,\nyou will still need a bundler such as [vite](https://vitejs.dev/). This is\nbecause this library exposes ES modules which need to be bundled into a format\nthat the browser can support. The live demo below uses Vite.\n\n##### Live Demo\n\n[![Open in Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/no-framework-vite)\n\n\u003c!-- # CORE_USAGE END # --\u003e\n\n\u003c!-- # CORE_NOTES START # --\u003e\n\n## Notes\n\n### TypeScript module augments\n\nThis library uses a custom object on the browser `window` for configuration.\nUnder normal circumstances by simply importing the package (with\n`import @skyra/discord-components-core`) the module augmentations should also be\nloaded. If for whatever reason this does not happen, then you can define them\nmanually yourself. You can do so with the following code snippet:\n\n```ts\nimport type { DiscordMessageOptions } from '@skyra/discord-components-core';\n\ndeclare global {\n  // eslint-disable-next-line no-var\n  var $discordMessage: DiscordMessageOptions | undefined;\n}\n```\n\n### Avatar shortcuts\n\nThe current avatar shortcut strings available are \"blue\" (default), \"gray\",\n\"green\", \"orange\", and \"red\". These shortcuts map to the following image links:\n\n```json\n{\n  \"blue\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png\",\n  \"gray\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png\",\n  \"green\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png\",\n  \"orange\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png\",\n  \"red\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png\"\n}\n```\n\nIf you want to add to or override the shortcuts, you can set them via\n`globalThis.$discordMessage.avatars` or by using the `setConfig` function\n(`import { setConfig } from '@skyra/discord-components-core'`).\n\n```ts\nglobalThis.$discordMessage = {\n  avatars: {\n    default: 'blue',\n    skyra: 'https://github.com/NM-EEA-Y.png',\n    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well\n  }\n};\n```\n\n```ts\nimport { setConfig } from '@skyra/discord-components-core';\n\nsetConfig({\n  avatars: {\n    default: 'blue',\n    skyra: 'https://github.com/NM-EEA-Y.png',\n    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well\n  }\n});\n```\n\n### Profile shortcuts\n\nSometimes you'll want to use the same message data across multiple messages. You\ncan do so by providing an object of profiles in\n`globalThis.$discordMessage.profiles` or by using the `setConfig` function\n(`import { setConfig } from '@skyra/discord-components-core'`).\n\n```ts\nglobalThis.$discordMessage = {\n  profiles: {\n    skyra: {\n      author: 'Skyra',\n      avatar: 'https://github.com/NM-EEA-Y.png',\n      bot: true,\n      verified: true,\n      roleColor: '#1e88e5'\n    },\n    favna: {\n      author: 'Favna',\n      avatar: 'https://github.com/favna.png',\n      roleColor: '#ff0000'\n    }\n  }\n};\n```\n\n```ts\nimport { setConfig } from '@skyra/discord-components-core';\n\nsetConfig({\n  profiles: {\n    skyra: {\n      author: 'Skyra',\n      avatar: 'https://github.com/NM-EEA-Y.png',\n      bot: true,\n      verified: true,\n      roleColor: '#1e88e5'\n    },\n    favna: {\n      author: 'Favna',\n      avatar: 'https://github.com/favna.png',\n      roleColor: '#ff0000'\n    }\n  }\n});\n```\n\nAnd then in your code:\n\n```tsx\n\u003cdiscord-messages\u003e\n  \u003cdiscord-message profile=\"skyra\"\u003e\n    Welcome to our server, \u003cdiscord-mention\u003eFavna\u003c/discord-mention\u003e!\n  \u003c/discord-message\u003e\n  \u003cdiscord-message profile=\"favna\"\u003eHey, glad to be here!\u003c/discord-message\u003e\n\u003c/discord-messages\u003e\n```\n\n### Theming\n\nEach of the components accepts the standard HTML properties for passing styling,\nsuch as `class` for passing CSS classes (JSS / CSS / SCSS etc.) or `style` to\npass inline style.\n\nYou can also pass your own custom HTML tags, for example set a `data-testid` to\nbe able to navigate to the component in your unit tests / end-to-end tests\n\n### Components notes\n\nBelow are notes for a few specific components.\n\n#### discord-messages component\n\nThis is a wrapper for any child `\u003cdiscord-message\u003e` component. It must be used\nin order for messages to display properly.\n\n#### discord-mention component\n\n1. If the default slot is left empty, the mention will be rendered as `'User'`,\n   `'Role'`, or `'channel`', depending on the `type` prop given.\n\n2. If you want to customize the color of a `role` type mention then you can pass\n   the color as a **hex** code in the `style` property. For example:\n\n```html\n\u003cdiscord-message\u003e\n  \u003cdiscord-mention type=\"role\" style=\"--discord-mention-color: #70f0b4;\"\n    \u003eGreen\u003c/discord-mention\n  \u003e\n  \u003cdiscord-mention type=\"role\" style=\"--discord-mention-color: #ff0000;\"\n    \u003eRed\u003c/discord-mention\n  \u003e\n\u003c/discord-message\u003e\n```\n\n#### discord-embed component\n\nAn embed that can be attached to the end of your messages. The default slot is\nused for the embed's description. The `footer` slot is used for the footer text.\n\nTo ensure the embed gets displayed correctly inside your message, be sure to\ngive it the proper `slot` attribute.\n\n```html\n\u003cdiscord-message\u003e\n  Hi, I'm part of the normal message content.\n  \u003cdiscord-embed slot=\"embeds\" color=\"#ff0000\"\u003e\n    Hi, I'm part of the embed message content.\n  \u003c/discord-embed\u003e\n\u003c/discord-message\u003e\n```\n\n#### discord-embed-fields component\n\nA wrapper for any child `\u003cdiscord-embed-fields\u003e` components. Must be used in\norder for fields to display properly. To ensure the embed fields gets displayed\ncorrectly inside your embed, be sure to give it the proper `slot` attribute.\n\n```html\n\u003cdiscord-message\u003e\n  \u003cdiscord-embed slot=\"embeds\"\u003e\n    Hi, I'm part of the embed message content.\n    \u003cdiscord-embed-fields slot=\"fields\"\u003e\n      \u003c!-- Embed fields go here --\u003e\n    \u003c/discord-embed-fields\u003e\n  \u003c/discord-embed\u003e\n\u003c/discord-message\u003e\n```\n\n#### discord-embed-field component\n\nAt least 2 consecutive fields need to be marked as inline in order for them to\nactually display next to each other. The maximum amount of inline fields is 3,\nand drops to 2 if an embed thumbnail is used.\n\n```html\n\u003cdiscord-message\u003e\n  \u003cdiscord-embed slot=\"embeds\"\u003e\n    Hi, I'm part of the embed message content.\n    \u003cdiscord-embed-fields slot=\"fields\"\u003e\n      \u003cdiscord-embed-field fieldTitle=\"Inline field\" inline\u003e\n        Field content.\n      \u003c/discord-embed-field\u003e\n      \u003cdiscord-embed-field fieldTitle=\"Inline field\" inline\u003e\n        Field content.\n      \u003c/discord-embed-field\u003e\n    \u003c/discord-embed-fields\u003e\n  \u003c/discord-embed\u003e\n\u003c/discord-message\u003e\n```\n\n\u003c!-- # CORE_NOTES END # --\u003e\n\n\u003c!-- # SCREENSHOTS START # --\u003e\n\n## Screenshots\n\n### Dark Mode\n\n**_A normal conversation_**\n\n![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/dark_mode/normal_conversation.png)\n\n**_Compact mode_**\n\n![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/dark_mode/compact_mode.png)\n\n**_With an embed_**\n\n![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/dark_mode/with_embed.png)\n\n### Light Mode\n\n**_A normal conversation_**\n\n![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/light_mode/normal_conversation.png)\n\n**_Compact mode_**\n\n![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/light_mode/compact_mode.png)\n\n**_With an embed_**\n\n![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/light_mode/with_embed.png)\n\n\u003c!-- # SCREENSHOTS END # --\u003e\n\n\u003c!-- # CONTRIBUTING START # --\u003e\n\n## Contributors\n\nPlease make sure to read the [Contributing Guide][contributing] before making a\npull request.\n\nThank you to all the people who already contributed to Discord Components!\n\n\u003ca href=\"https://github.com/skyra-project/discord-components/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=skyra-project/discord-components\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- # CONTRIBUTING END # --\u003e\n\n[lit]: https://lit.dev/\n[contributing]: .github/CONTRIBUTING.md\n[wc-discord-message]: https://github.com/Danktuary/wc-discord-message\n[danktuary]: https://github.com/Danktuary\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyra-project%2Fdiscord-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyra-project%2Fdiscord-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyra-project%2Fdiscord-components/lists"}