# @skyra/discord-components-core
**Web components to easily build and display fake Discord messages on your
webpages**
[](https://github.com/skyra-project/discord-components/blob/main/LICENSE.md)
[](https://donate.skyra.pw/patreon)
_Core Package_
[](https://www.npmjs.com/package/@skyra/discord-components-core)
[](https://www.npmjs.com/package/@skyra/discord-components-core)
[](https://bundlephobia.com/result?p=@skyra/discord-components-core)
_React Bindings_
[](https://www.npmjs.com/package/@skyra/discord-components-react)
[](https://www.npmjs.com/package/@skyra/discord-components-react)
[](https://bundlephobia.com/result?p=@skyra/discord-components-react)
[](https://join.skyra.pw)
---
**_Table of Contents_**
- [@skyra/discord-components-core](#skyradiscord-components-core)
- [Description](#description)
- [Upgrading guide](#upgrading-guide)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Using the Discord font](#using-the-discord-font)
- [Integrations](#integrations)
- [Angular](#angular)
- [Important Notes](#important-notes)
- [Live Demo](#live-demo)
- [React](#react)
- [Important Notes](#important-notes-1)
- [Vite](#vite)
- [Live Demo](#live-demo-1)
- [Create React App](#create-react-app)
- [Important Notes](#important-notes-2)
- [NextJS](#nextjs)
- [Live Demo Pages Directory](#live-demo-pages-directory)
- [Live Demo App Directory](#live-demo-app-directory)
- [Known limitations](#known-limitations)
- [Docusaurus](#docusaurus)
- [Live Demo](#live-demo-2)
- [Vue](#vue)
- [Vite](#vite-1)
- [Live Demo](#live-demo-3)
- [Configuration](#configuration)
- [Nuxt](#nuxt)
- [Live Demo](#live-demo-4)
- [Configuration](#configuration-1)
- [Astro](#astro)
- [Important Notes](#important-notes-3)
- [Live Demo](#live-demo-5)
- [Solid](#solid)
- [Live Demo](#live-demo-6)
- [Svelte](#svelte)
- [Vite](#vite-2)
- [Live Demo](#live-demo-7)
- [Sveltekit](#sveltekit)
- [Live Demo](#live-demo-8)
- [Qwik](#qwik)
- [Live Demo](#live-demo-9)
- [Preact](#preact)
- [Live Demo](#live-demo-10)
- [HTMX](#htmx)
- [Live Demo](#live-demo-11)
- [No Framework](#no-framework)
- [Important Notes](#important-notes-4)
- [Live Demo](#live-demo-12)
- [Notes](#notes)
- [TypeScript module augments](#typescript-module-augments)
- [Avatar shortcuts](#avatar-shortcuts)
- [Profile shortcuts](#profile-shortcuts)
- [Theming](#theming)
- [Components notes](#components-notes)
- [discord-messages component](#discord-messages-component)
- [discord-mention component](#discord-mention-component)
- [discord-embed component](#discord-embed-component)
- [discord-embed-fields component](#discord-embed-fields-component)
- [discord-embed-field component](#discord-embed-field-component)
- [Screenshots](#screenshots)
- [Dark Mode](#dark-mode)
- [Light Mode](#light-mode)
- [Contributors](#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]**
### Upgrading guide
The source code and documentation of this package has been updated for version
4.x of this package. To find out how to upgrade from v3.x to v4.x, please refer
to the
[upgrading guide](https://discord-components.js.org/upgrading/v3x-v4x/#component-changes)
## Features
- Design modelled after [Discord](https://discord.com/) 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
- Uses [Lit Element][lit] to support all browsers and environments
- Simple syntax!
## Installation
```bash
yarn add @skyra/discord-components-core
# or npm install @skyra/discord-components-core
```
## Usage
The syntax is kept fairly simple. Here's a basic example of a regular
conversation:
```html
Hey guys, I'm new here! Glad to be able to join you all!
Hi, I'm new here too!
Hey, User and
Dawn. Welcome to our server!
```
> [!IMPORTANT]
>
> For further examples on how to use components, please refer to the Stackblitz
> examples linked below. Choose the framework you are using and click on the
> "Open in Stackblitz" button to see the code and how it renders in the browser.
### Using the Discord font
This library can use the Discord font if you load it into your project. You can
do so by including the CSS below:
```css
@font-face {
font-family: 'Whitney';
src: url('https://cdn.skyra.pw/whitney-font/v2/Book.woff') format('woff');
font-weight: 400;
}
@font-face {
font-family: 'Whitney';
src: url('https://cdn.skyra.pw/whitney-font/v2/Medium.woff') format('woff');
font-weight: 500;
}
@font-face {
font-family: 'Whitney';
src: url('https://cdn.skyra.pw/whitney-font/v2/Semibold.woff') format('woff');
font-weight: 600;
}
@font-face {
font-family: 'Whitney';
src: url('https://cdn.skyra.pw/whitney-font/v2/Bold.woff') format('woff');
font-weight: 700;
}
```
### Integrations
#### Angular
##### Important Notes
You need to import the `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and add it
to the `schemas` array of your module or component decorator for the module or
component using custom elements. This is to ensure that Angular knows custom
elements are used in this module or component.
```ts
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
@Component({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {}
```
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/angular)
#### React
##### Important Notes
React is currently the only library among the "big" libraries for frontend
development that does not fully support custom elements / webcomponents yet (see
[this React documentation page for more info](https://react.dev/reference/react-dom/components#custom-html-elements)).
For this reason we ship the package `@skyra/discord-components-react`.
We sincerely hope that this situation will improve in the future, but no one
knows what their plans are.
##### Vite
###### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/react-vite-ts)
##### Create React App
###### Important Notes
Create React App is no longer the recommended way to start with a React app as
per React's own documentation. We very strongly recommend using Vite instead.
##### NextJS
###### Live Demo Pages Directory
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts)
###### Live Demo App Directory
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/nextjs-app-directory-ts)
###### Known limitations
1. All the React components will only render on the client, they are bundled
with the `'use client';` header that NextJS expects for CSR only components.
This is because there is currently no good way to render webcomponents on the
server. When
[@lit-labs/nextjs](https://www.npmjs.com/package/@lit-labs/nextjs) adds
[support for the app directory](https://github.com/lit/lit/issues/3657) we
can revisit this limitation.
2. When using the app directory we are not able to get profiles working. We are
open to suggestions on how to fix this, ideally through a pull request to
[https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].
##### Docusaurus
###### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/react-docusaurus-ts)
#### Vue
##### Vite
###### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/vue-vite-ts)
###### Configuration
When using Vue 3 with Vite you need to setup Vite to recognise the custom
components. You can do that with the following code in your `vite.config.ts`:
```ts
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('discord-')
}
}
})
]
});
```
##### Nuxt
###### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/nuxt3-ts)
###### Configuration
When using Nuxt 3 you need to setup Vite to recognise the custom components. You
can do that with the following code in your `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
devtools: { enabled: true },
vue: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('discord-')
}
}
});
```
#### Astro
##### Important Notes
Because it is possible to use different integrations in an Astro project you can
also reference the other examples here. The live demo linked below uses the
[Lit integration for Astro](https://docs.astro.build/en/guides/integrations-guide/lit/)
as well as the
[React integration for Astro](https://docs.astro.build/en/guides/integrations-guide/react/).
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/astro)
#### Solid
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/solid-vite-ts)
#### Svelte
##### Vite
###### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/svelte-vite-ts)
##### Sveltekit
###### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/sveltekit-ts)
#### Qwik
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/qwik-vite-ts)
#### Preact
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/preact-vite-ts)
#### HTMX
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/htmx-vite-ts)
#### No Framework
##### Important Notes
Note that while it is entirely possible to use this library without a framework,
you will still need a bundler such as [vite](https://vitejs.dev/). This is
because this library exposes ES modules which need to be bundled into a format
that the browser can support. The live demo below uses Vite.
##### Live Demo
[](https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/no-framework-vite)
## Notes
### TypeScript module augments
This library uses a custom object on the browser `window` for configuration.
Under normal circumstances by simply importing the package (with
`import @skyra/discord-components-core`) the module augmentations should also be
loaded. If for whatever reason this does not happen, then you can define them
manually yourself. You can do so with the following code snippet:
```ts
import type { DiscordMessageOptions } from '@skyra/discord-components-core';
declare global {
// eslint-disable-next-line no-var
var $discordMessage: DiscordMessageOptions | undefined;
}
```
### Avatar shortcuts
The current avatar shortcut strings available are "blue" (default), "gray",
"green", "orange", and "red". These shortcuts map to the following image links:
```json
{
"blue": "https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png",
"gray": "https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png",
"green": "https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png",
"orange": "https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png",
"red": "https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png"
}
```
If you want to add to or override the shortcuts, you can set them via
`globalThis.$discordMessage.avatars` or by using the `setConfig` function
(`import { setConfig } from '@skyra/discord-components-core'`).
```ts
globalThis.$discordMessage = {
avatars: {
default: 'blue',
skyra: 'https://github.com/NM-EEA-Y.png',
djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
}
};
```
```ts
import { setConfig } from '@skyra/discord-components-core';
setConfig({
avatars: {
default: 'blue',
skyra: 'https://github.com/NM-EEA-Y.png',
djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
}
});
```
### Profile shortcuts
Sometimes you'll want to use the same message data across multiple messages. You
can do so by providing an object of profiles in
`globalThis.$discordMessage.profiles` or by using the `setConfig` function
(`import { setConfig } from '@skyra/discord-components-core'`).
```ts
globalThis.$discordMessage = {
profiles: {
skyra: {
author: 'Skyra',
avatar: 'https://github.com/NM-EEA-Y.png',
bot: true,
verified: true,
roleColor: '#1e88e5'
},
favna: {
author: 'Favna',
avatar: 'https://github.com/favna.png',
roleColor: '#ff0000'
}
}
};
```
```ts
import { setConfig } from '@skyra/discord-components-core';
setConfig({
profiles: {
skyra: {
author: 'Skyra',
avatar: 'https://github.com/NM-EEA-Y.png',
bot: true,
verified: true,
roleColor: '#1e88e5'
},
favna: {
author: 'Favna',
avatar: 'https://github.com/favna.png',
roleColor: '#ff0000'
}
}
});
```
And then in your code:
```tsx
Welcome to our server, Favna!
Hey, glad to be here!
```
### Theming
Each of the components accepts the standard HTML properties for passing styling,
such as `class` for passing CSS classes (JSS / CSS / SCSS etc.) or `style` to
pass inline style.
You can also pass your own custom HTML tags, for example set a `data-testid` to
be able to navigate to the component in your unit tests / end-to-end tests
### Components notes
Below are notes for a few specific components.
#### discord-messages component
This is a wrapper for any child `` component. It must be used
in order for messages to display properly.
#### discord-mention component
1. If the default slot is left empty, the mention will be rendered as `'User'`,
`'Role'`, or `'channel`', depending on the `type` prop given.
2. If you want to customize the color of a `role` type mention then you can pass
the color as a **hex** code in the `style` property. For example:
```html
Green
Red
```
#### discord-embed component
An embed that can be attached to the end of your messages. The default slot is
used for the embed's description. The `footer` slot is used for the footer text.
To ensure the embed gets displayed correctly inside your message, be sure to
give it the proper `slot` attribute.
```html
Hi, I'm part of the normal message content.
Hi, I'm part of the embed message content.
```
#### discord-embed-fields component
A wrapper for any child `` components. Must be used in
order for fields to display properly. To ensure the embed fields gets displayed
correctly inside your embed, be sure to give it the proper `slot` attribute.
```html
Hi, I'm part of the embed message content.
```
#### discord-embed-field component
At least 2 consecutive fields need to be marked as inline in order for them to
actually display next to each other. The maximum amount of inline fields is 3,
and drops to 2 if an embed thumbnail is used.
```html
Hi, I'm part of the embed message content.
Field content.
Field content.
```
## Screenshots
### Dark Mode
**_A normal conversation_**
**_Compact mode_**
**_With an embed_**
### Light Mode
**_A normal conversation_**
**_Compact mode_**
**_With an embed_**
## Contributors
Please make sure to read the [Contributing Guide][contributing] before making a
pull request.
Thank you to all the people who already contributed to Discord Components!
[contributing]: ../../.github/CONTRIBUTING.md
[wc-discord-message]: https://github.com/Danktuary/wc-discord-message
[danktuary]: https://github.com/Danktuary
[lit]: https://lit.dev