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

Container

The Container component groups other components and lets you define a visual container to organize the layout. You can add child components and set an accent color or mark it as a spoiler.

import { , , , , , , , , ,  } from 'seyfert';
import {  } from 'seyfert/lib/types';

const  = new ()
	.(new ()
	.('https://example.com/image.png')
	.('This is a thumbnail image'))
	.(
		new ().('This is a message with a thumbnail')
	);

const  = new ()
	.('attachment://example.png')
	.(false);

const  = new ()
	.(.)
	.(true);

const  = new ()
    .(
        new ().('https://example.com/image1.png').('Image 1'),
        new ().('https://example.com/image2.jpg').()
  	);

const  = new ()
    .(, , , )
    .('#5865f2')
    .(false);

.({ : [] })

File

The File component is used to display attachments within the content. It allows you to set the file's URL and mark it as a spoiler if needed.

import { ,  } from 'seyfert';

const  = new ().('example.png').('url','https://example.com/example.png');

const  = new ()
		.('attachment://example.png')
		.(false);

.({ : 1 << 15, : [], : [] });

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 { , ,  } from 'seyfert';

const  = new ().(
	new ()
	.('https://example.com/image.png')
	.('This is a thumbnail image'))
	.(
		new ().('This is a message with a thumbnail')
	);

Separator

The Separator is used to visually separate other components, either by adding space (padding) or displaying a dividing line. You can configure the spacing and enable or disable the visual divider.

import {  } from 'seyfert';
import {  } from 'seyfert/lib/types';

const  = new ()
	.(.)
	.(true);

MediaGallery

The MediaGallery lets you display between 1 and 10 images or multimedia files in a gallery format. Each item can be defined with its URL, a description, and optionally marked as a spoiler.

import { ,  } from 'seyfert';

const  = new ()
    .(
        new ().('https://example.com/image1.png').('Image 1'),
        new ().('https://example.com/image2.jpg').()
    );

Example

Let's recreate the discord presentation for the components v2.

import {
	,
	,
	,
	,
	,
	,
	,
	,
} from "seyfert";
import { ,  } from "seyfert/lib/types";

const  = new ().(
	new ().(
		new ().("attachment://banner.png"),
	),
	new ().(
		"## 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 ().(
		new ().("attachment://hero.png"),
	),
	new ()
		.(
			new ().("A brief overview of components:"),
		)
		.(
			new ()
				.(.)
				.("Overview")
				.("https://discord.com/developers/docs/components/overview"),
		),
	new ()
		.(
			new ().("A list of all the components:"),
		)
		.(
			new ()
				.(.)
				.("Reference")
				.(
					"https://discord.com/developers/docs/components/reference#what-is-a-component-component-types",
				),
		),

	new ()
		.(
			new ().("Get started with message components:"),
		)
		.(
			new ()
				.(.)
				.("Guide")
				.(
					"https://discord.com/developers/docs/components/using-message-components",
				),
		),
	new (),
	new ().(
		"-# This message was composed using components, check out the request:",
	),

	new ().("data.json"),
);

.({ : [], : . });

Components v2