# @skyra/discord-components-core

[Github]

## Explanation

This website contains various samples for @skyra/discord-components-core which is a webcomponents library (powered by Lit) to create Discord-like messages with rich content. The always up-to-date version of this document can be found here.

### A normal conversation

Hey guys, I'm new here! Glad to be able to join you all! Hi, I'm new here too! Hey, Alyx Vargas and Dawn. Welcome to our server!
Be sure to read through the rules. You can ping Support if you need help. Hello everyone! How's it going? Thank you Maximillian Osborn! I'm doing well, Willard Walton. What about yourself? s!8ball How am I doing today? Yes.

### The different kind of mentions

users
roles with #ff0000
channels
voice channels
locked channels
thread channels
forum channels
server guide channels
channels-and-roles channel
customize-community channel
slash commands

### Light mode

Look at me I'm a beautiful butterfly Fluttering in the sunlight 🌞 Thank you Maximillian Osborn!

### Compact mode

Look at me I'm a beautiful butterfly Fluttering in the moonlight 🌝 Waiting for the day when Compact mode would be turned on Oh here it is!

### With subsequent messages

I can send multiple messages with my avatar showing only once That's how Discord handles multiple messages from the same author as well Just keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically change what is displayed!

### With subsequent messages and compact mode

I can send multiple messages with my avatar showing only once That's how Discord handles multiple messages from the same author as well Just keep in mind that Discord does some funky stuff like with time between messages, this library doesn't automatically change what is displayed!

### Markdown Styling

I am bold text! I am italic text! I am bold italic text! I am underlined text! I have subscript:Only you can see this • Dismiss message I am inline-code text! I am multi-
line code I am spoiler text! I am quoted text!

### No Background mode

This message blends perfectly with your own background No Background mode is turned on here

### Mentions

Hey, Alyx Vargas and Dawn. Welcome to our server! Be sure to read through the rules. You can ping Support if you need help. Feel free to join General and talk with us and post thoughts in feedback. Hey there Maximillian Osborn, thanks! I will! Also, make sure to run profile to create your server profile!

### Custom Discord Emojis

Hey these are some custom emojis: Custom emojis in the embed description: Custom emojis in the field content They can also be jumbo sized to represent if the message only has emojis:

### Server Invites

discord.gg/djs
discord.gg/code
discord.gg/6gakFR2

### Image Attachments with small images

That's a very small logo image!

### Image Attachments with custom image components (you can see this in the code only)

This has a custom image component!

### Image Attachments with large images

Hey guys, check out this awesome, cute, and totally amazing dragon!

### File Attachments

This pk9 file is definitely not a virus! (It's a PKHeX export of a Dragonite)

### Audio attachments

Listen to this amazing song from Baldur's Gate 3!

### Video attachments

Look at this video!

### System Messages

Welcome, Snazzah. We hope you brought pizza. Snazzah has added Discord Developers #discord-api-announcements to this channel. Its most important updates will show up here. Favna just boosted the server! Favna started a thread: Skyra Suggestion Thread. See all threads. Snazzah added Favna to the group. Favna started a call that lasted an hour. Snazzah changed the channel icon. Snazzah changed the channel name: A humble Group DM You missed a call from Favna that lasted a minute. Favna left the group. Favna pinned a message to this channel. See all pinned messages. Dominik upgraded Skyra to premium for this server! 🎉 Warning! Warning! This library is the coolest of them all! Error! Cool overload!.

### Official Discord Community Updates

Note: The URL to the official Discord avatar for Community Updates is https://cdn.discordapp.com/avatars/669627189624307712/a0389d52d24fdef878aca87e8d52cc2a.webp, you can use this URL to set up a profile for these messages.

This channel has been set up to receive official Discord announcements for admins and moderators of Community servers. We'll let you know about important updates, such as new moderation features or changes to your server's eligibility for Server Discovery, here.
You can change which channel these messages are sent to at any time inside Server Settings. We recommend choosing your staff channel, as some information may be sensitive to your server.
Thanks for choosing Discord as the place to build your community!

### Threads

Favna started a thread: Skyra Suggestion Thread. See all threads. Pong! Let's make a thread! There are no messages in this thread yet.

### Reactions

React to this message!

### Replies

What do you think about this image? Looks nice! Looks nice! I agree! Butterflies look beautiful! They do! This channel has been set up to receive official Discord announcements... Hey that's a community update!

### Replies in Compact Mode

What do you think about this image? Looks nice! Looks nice! I agree! Butterflies look beautiful! They do! This channel has been set up to receive official Discord announcements... Hey that's a community update!

### Commands

Pong! Pong! Took 100ms. The user is Favna! The content is "The user is Favna!" The content is "This is nice message!" This channel has been set up to receive official Discord announcements... I'm the best server in discord

### Commands with deleted message

Took 100ms. The content is "The user is Favna!"

### Commands in Compact Mode

Pong! Pong! Took 100ms. The user is Favna! The content is "The user is Favna!" The content is "This is nice message!" This channel has been set up to receive official Discord announcements... I'm the best server in discord

### Components

Here are some components! Primary Button Secondary Button Green Button Red Button Link Primary Button Secondary Button Green Button Red Button Link

### Select Menu in Default theme!

### Select Menu in light theme!

### Modals Default Theme

You can spawn a modal by clicking a button! Click me for a modal

### Modals Light Theme

You can spawn a modal by clicking a button! Click me for a modal

### Discord Polls (all cases)

#### No choice selected by user - single choice

#### No choice selected by user - multiple choice

#### With a choice selected by the user - single choice

#### With a choice selected by the user - multiple choice

#### With a vote cast by the user - single choice

#### With a vote cast by the user - multiple choice

#### With a vote casted by the user and the poll has ended - single choice

#### With a vote casted by the user and the poll has ended - multiple choice

#### An ended poll without the user having cast a vote - single choice

#### An ended poll without the user having cast a vote - multiple choice

#### Showing results without having cast a vote - single choice

#### Showing results without having cast a vote - multiple choice

#### Results are a tie - single choice

#### Results are a tie - multiple choice

#### Results are a tie without the user having cast a vote - single choice

#### Results are a tie without the user having cast a vote - multiple choice

#### Results are a tie with user having selected a winning option - single choice

#### Results are a tie with user having selected a winning option - multiple choice

#### Results are a tie with user having selected a losing option - single choice

#### Results are a tie with user having selected a losing option - multiple choice

### Verified Discord bots

Wow I just got verified!

### Full embed example

Sapphire is a next-gen object-oriented Discord.js bot framework.
Sapphire is a community driven framework that aims to give you all the features you need to make your Discord bot.
With a history of many other Discord bot frameworks (both for NodeJS and other languages) to inspire Sapphire, it has become the ultimate modern experience of writing your code. 1 year ago yarn add @sapphire/framework

- Advanced plugin support
- Supports both CommonJS and ESM
- Completely modular and extendable
- Designed with first class TypeScript support in mind
- Includes optional utilities that you can use in any project

Open source libraries to aid in the creation of Discord bots

### Server crosspost messages

Hey peeps!
We have a redesigned website over at https://discord.js.org/
Check it out if you want or not
You're most likely using a cached version of the old website because of our service worker, so make sure to clear your cache and any cookies/service workers you have. For some of you nothing needs to be done, for others a so called "hard-refresh" will do the trick too.
Bugs and improvement requests go into our site-discussion channel (you have to be in the server for this)

### Embedded video

### Embed fields

Some value here. Some value here. Some value here. Some value here. Some value here. Some value here. Some value here. Some value here. Some value here.

### A tenor-gif in video format

### Inline fields

Some value here Some value here Some value here

### Inline fields with a thumbnail

Some value here Some value here Some value here

### With all slots of a message filled

This is the text of the message Embed description Field value Pong!

### Headers

This is a header 1 This is a header 2 This is a header 3

### Ordered list items

This is an ordered list item You can start your list item at a custom number We will calculate the length internally This whole level is considered to have a start number length of 3

### Unordered list items

Discord imposes a limit of eleven levels but we can go (this is 11) deeper ain't that cool we can also be bold or italic or both