> ## Documentation Index
> Fetch the complete documentation index at: https://docs.discord.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components Overview

> Learn about Discord's interactive message components.

export const BrowserIcon = props => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M1 6a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6Zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /><path fill="currentColor" d="M1 12a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v6a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-6Z" /></svg>;

export const CompassIcon = props => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" /><path fill="currentColor" fill-rule="evenodd" d="M23 12a11 11 0 1 1-22 0 11 11 0 0 1 22 0ZM7.74 9.3A2 2 0 0 1 9.3 7.75l7.22-1.45a1 1 0 0 1 1.18 1.18l-1.45 7.22a2 2 0 0 1-1.57 1.57l-7.22 1.45a1 1 0 0 1-1.18-1.18L7.74 9.3Z" clip-rule="evenodd" /></svg>;

export const ChatDotsIcon = props => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M22 12a10 10 0 0 1-10 10H2.2a1 1 0 0 1-.75-1.66l2.06-2.37a.52.52 0 0 0 .04-.61A10 10 0 1 1 22 12Zm-10 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm7-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd" /></svg>;

Components allow you to add interactive elements to modals and the messages your app sends. They're accessible, customizable, and easy to use. For an introduction to component types and modals, see the [Components & Modals](/developers/platform/components) platform page.

<img src="https://mintcdn.com/discord/z4DGSUUgOUjp9uQh/images/components/hero.png?fit=max&auto=format&n=z4DGSUUgOUjp9uQh&q=85&s=bbe27e35b09bb2104ceccd983b4ff08b" alt="Image showing examples of components UI" width="4863" height="1348" data-path="images/components/hero.png" />

To use components, messages must be sent with the `IS_COMPONENTS_V2` flag (`1<<15`). Note that using this flag disables traditional content and embeds - all content must be sent as components instead.

<Info>
  [Legacy message component behavior](/developers/components/reference#legacy-message-component-behavior) will **not** be deprecated and will continue to be available to your apps on a message-by-message basis. However, we recommend using the new components for new projects and features.
</Info>

<CardGroup cols={3}>
  <Card title="Using Message Components" href="/developers/components/using-message-components" icon={<ChatDotsIcon />}>
    A guide on sending Message Components with examples.
  </Card>

  <Card title="Using Modal Components" href="/developers/components/using-modal-components" icon={<CompassIcon />}>
    A guide on sending Modal Components with examples.
  </Card>

  <Card title="Component Reference" href="/developers/components/reference" icon={<BrowserIcon />}>
    Explore the Components reference documentation.
  </Card>
</CardGroup>

***

## Get Help & Join the Community

Do you have a question or want to connect with other app developers?

* Join our [DDevs Discord Server](https://discord.gg/discord-developers) and get help from the community, share best practices, and discover new ways to enhance your apps.