|
| 1 | +--- |
| 2 | +title: "Introducing New Components for Messages!" |
| 3 | +date: "2025-04-22" |
| 4 | +topics: |
| 5 | +- "User Apps" |
| 6 | +- "HTTP API" |
| 7 | +- "Interactions" |
| 8 | +--- |
| 9 | + |
| 10 | +We'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. |
| 11 | + |
| 12 | +#### Why We Built Components V2 |
| 13 | + |
| 14 | +Our previous components system, while functional, had limitations: |
| 15 | + |
| 16 | +- Content, attachments, embeds, and components had to follow fixed vertical positioning rules |
| 17 | +- Visual styling options were limited |
| 18 | +- It was difficult to make visually cohesive experiences that combined the various functionalities of messages given they were expressed in a non-unified system |
| 19 | + |
| 20 | +Our 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. |
| 21 | + |
| 22 | +#### What's New |
| 23 | + |
| 24 | +[Components V2](/docs/components/overview) introduces several new component types that can be used in messages: |
| 25 | + |
| 26 | +#### New Layout Components |
| 27 | + |
| 28 | +- [**Section**](/docs/components/reference#section) - Combine text with an accessory component for contextually linked elements |
| 29 | +- [**Container**](/docs/components/reference#container) - Create visually distinct groupings with a customizable accent color |
| 30 | +- [**Separator**](/docs/components/reference#separator) - Add visual spacing and dividers between components |
| 31 | + |
| 32 | +#### New Content Components |
| 33 | + |
| 34 | +- [**Text Display**](/docs/components/reference#text-display) - Add rich markdown-formatted text anywhere in your messages |
| 35 | +- [**Thumbnail**](/docs/components/reference#thumbnail) - An image used in a [section](/docs/components/reference#section) |
| 36 | +- [**Media Gallery**](/docs/components/reference#media-gallery) - Present collections of images and videos in an organized grid |
| 37 | +- [**File**](/docs/components/reference#file) - Embed file attachments as part of your message layout |
| 38 | + |
| 39 | +#### Getting Started |
| 40 | + |
| 41 | +To use the new components, you'll need to send the message flag `1 << 15` (`IS_COMPONENTS_V2`) which activates the components system on a per-message basis. |
| 42 | + |
| 43 | +We've created guides to help you implement these new features: |
| 44 | + |
| 45 | +- [Using Message Components](/docs/components/using-message-components) - Learn how to build rich message layouts with components |
| 46 | +- [Using Modal Components](/docs/components/using-modal-components) - Create interactive forms and dialogs |
| 47 | + |
| 48 | +#### Compatibility Notes |
| 49 | + |
| 50 | +[Legacy component behavior](/docs/components/reference#legacy-message-component-behavior) will continue to work as before, so your existing integrations won't break. However, when using the Components V2 flag, you'll need to adapt to a few changes: |
| 51 | + |
| 52 | +- The `content` and `embeds` fields will no longer work but you'll be able to use [Text Display](/docs/components/reference#text-display) and [Container](/docs/components/reference#container) as replacements |
| 53 | +- Attachments need to be exposed through components to be visible. You can use a [Media Gallery](/docs/components/reference#media-gallery), [Thumbnail](/docs/components/reference#thumbnail), or [File](/docs/components/reference#file) component to display them |
| 54 | +- The `poll` and `stickers` fields are disabled |
| 55 | +- A max of 10 top-level components and 30 total components in a message |
| 56 | + |
| 57 | +#### Developer Resources |
| 58 | + |
| 59 | +Check out our [Component Reference](/docs/components/reference) for detailed specifications on all available components. |
| 60 | + |
| 61 | +We can't wait to see what you build! |
0 commit comments