This section explains how to use the v2 components to build interfaces in Discord.

Section

The Section component allows you to group text elements and an accessory (like a Thumbnail or a button) within the same section. It is ideal for combining a summary with an image or an action.

import { Section, Thumbnail, TextDisplay} from 'seyfert';
 
const section = new Section().setAccessory(
	new Thumbnail()
	.setUrl('https://example.com/image.png')
	.setDescription('This is a thumbnail image'))
	.addComponents(
		new TextDisplay().setContent('This is a message with a thumbnail')
	);

Example

Let's make a real presentation, let's recreate the discord presentation for the components v2.

 
import {
	Button,
	Container,
	File,
	MediaGallery,
	MediaGalleryItem,
	Section,
	Separator,
	TextDisplay,
} from "seyfert";
import { ButtonStyle } from "seyfert/lib/types";
 
const components = new Container().addComponents(
	new MediaGallery().addItems(
		new MediaGalleryItem().setMedia("attachment://banner.png"),
	),
	new TextDisplay().setContent(
		"## Introducing New Components for Messages!\nWe're bringing new components to messages that you can use in your apps. They allow you to have full control over the layout of your messages.\n\nOur previous components system, while functional, had limitations:\n- Content, attachments, embeds, and components had to follow fixed positioning rules\n- Visual styling options were limited\n\nOur new component system addresses these challenges with fully composable components that can be arranged and laid out in any order, allowing for a more flexible and visually appealing design. Check out the [changelog](https://discord.com/developers/docs/change-log) for more details.",
	),
	new MediaGallery().addItems(
		new MediaGalleryItem().setMedia("attachment://hero.png"),
	),
	new Section()
		.setComponents(
			new TextDisplay().setContent("A brief overview of components:"),
		)
		.setAccessory(
			new Button()
				.setStyle(ButtonStyle.Link)
				.setLabel("Overview")
				.setURL("https://discord.com/developers/docs/components/overview"),
		),
	new Section()
		.setComponents(
			new TextDisplay().setContent("A list of all the components:"),
		)
		.setAccessory(
			new Button()
				.setStyle(ButtonStyle.Link)
				.setLabel("Reference")
				.setURL(
					"https://discord.com/developers/docs/components/reference#what-is-a-component-component-types",
				),
		),
 
	new Section()
		.setComponents(
			new TextDisplay().setContent("Get started with message components:"),
		)
		.setAccessory(
			new Button()
				.setStyle(ButtonStyle.Link)
				.setLabel("Guide")
				.setURL(
					"https://discord.com/developers/docs/components/using-message-components",
				),
		),
	new Separator(),
	new TextDisplay().setContent(
		"-# This message was composed using components, check out the request:",
	),
 
	new File().setMedia("data.json"),
);
 
ctx.write({ components: [components], flags: 1 << 15 });

Components v2

Section

Example

On this page