Seyfert v3.1.0: Components v2 — Discord's New UI Primitives

A Speedrun Release

Discord announced Components v2 with almost no warning. We had to move fast.

2 days later, here we are. Full support for Discord's new UI primitives.

Thanks for nothing, Discord. Thanks for everything, Seyfert team. ❤️

What Are Components v2?

Discord's original components — buttons, select menus, modals — were revolutionary. But they had limits. Want a rich layout? Multiple sections? Thumbnails? You were out of luck.

Components v2 changes everything. These aren't just new components; they're a new way to structure message content.

The New Components

Container

The foundation. Containers hold other components and define the layout structure:

new Container()
  .addComponents(section, separator, mediaGallery)

Section

Group related content with text and an accessory (thumbnail or button):

new Section()
  .addComponents(
    new TextDisplay().setContent("**Product Name**"),
    new TextDisplay().setContent("$29.99")
  )
  .setAccessory(thumbnail)

TextDisplay

Rich text content within sections:

new TextDisplay()
  .setContent("This is **bold** and this is *italic*")

Thumbnail

Small images that sit alongside section content:

new Thumbnail()
  .setMedia("https://example.com/image.png")

MediaGallery

Display multiple images in a beautiful gallery layout:

new MediaGallery()
  .addItems(
    new MediaGalleryItem().setMedia(image1),
    new MediaGalleryItem().setMedia(image2)
  )

File

Attach files directly within your component layout:

new File()
  .setMedia("attachment://report.pdf")

Separator

Visual dividers between sections:

new Separator()
  .setSpacing(Spacing.Small)
  .setDivider(true)

Why This Matters

Before Components v2, rich Discord bot UIs required creative workarounds — embedding images, using multiple embeds, or accepting limitations.

Now you can build:

• Product catalogs with thumbnails and descriptions
• Dashboards with organized data sections
• Media galleries for image-heavy content
• Document layouts with proper visual hierarchy

The gap between "bot message" and "real application" just got much smaller.

Hook Into the Pipeline

New lifecycle hooks give you more control over interaction processing:

class MyCommand extends Command {
  onBeforeMiddlewares(ctx: Context) {
    // Runs before any middleware
    console.log('Command received:', ctx.commandName);
  }

  onBeforeOptions(ctx: Context) {
    // Runs before option parsing
    return { customData: true };
  }
}

Perfect for logging, analytics, or custom preprocessing.

Fixes

• editOrReply now properly accepts flags, enabling v2 components in edit operations

Performance

• Fixed a critical performance issue causing high CPU usage when iterating cache.members.values() on large guilds

Get Started

pnpm install [email protected]

Then dive into the Components v2 documentation to start building next-gen UIs.

Discord's UI toolkit just evolved. So did yours.