> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Sticker Bubble

> A self-extracting bubble that renders a sticker image from a sticker custom message.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                                                                            |
  | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Component      | `CometChatStickerBubble`                                                                                                                                                                         |
  | Package        | `@cometchat/chat-uikit-react`                                                                                                                                                                    |
  | Import         | `import { CometChatStickerBubble } from "@cometchat/chat-uikit-react";`                                                                                                                          |
  | CSS root class | `.cometchat-sticker-bubble`                                                                                                                                                                      |
  | Primary output | None — renders from the SDK message                                                                                                                                                              |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; plus the [Stickers extension](/fundamentals/stickers) enabled in the Dashboard |
  | Stitching      | None — self-extracting from the SDK message                                                                                                                                                      |
  | Full props     | See [Props](#props)                                                                                                                                                                              |
</Accordion>

## Overview

`CometChatStickerBubble` renders a sticker. It is **self-extracting**: pass the SDK custom `message` and the bubble extracts the sticker image URL and name from its metadata, so it works standalone.

<Note>
  **Requires the Stickers extension enabled in the [CometChat Dashboard](/fundamentals/stickers).** Sticker messages (`extension_sticker`) are only produced once the Stickers extension is turned on and sticker sets are configured for your app. Without it the composer's sticker keyboard is unavailable and this bubble never renders. See the [Stickers guide](/fundamentals/stickers) to enable it, and the [Plugins overview](/ui-kit/react/plugins/overview#built-in-plugins) for how the UI Kit auto-routes sticker messages to this bubble.
</Note>

<Info>
  **Live Preview** — interact with the sticker bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--sticker-message)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble--sticker-message&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "500px", border: "1px solid #e0e0e0"}} title="CometChat Sticker Bubble — Default" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatStickerBubble } from "@cometchat/chat-uikit-react";

function StickerMessage({ message }: { message: CometChat.CustomMessage }) {
  return <CometChatStickerBubble message={message} />;
}
```

***

## Props

### message

The sticker custom message. The bubble extracts the image URL and name from its metadata. **Required.**

|          |                           |
| -------- | ------------------------- |
| Type     | `CometChat.CustomMessage` |
| Required | Yes                       |

***

### alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

|         |                     |
| ------- | ------------------- |
| Type    | `"left" \| "right"` |
| Default | derived             |

***

### className

Additional CSS class applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

## CSS Selectors

| Target              | Selector                                                                      |
| ------------------- | ----------------------------------------------------------------------------- |
| Root                | `.cometchat-sticker-bubble`                                                   |
| Incoming / outgoing | `.cometchat-sticker-bubble--incoming` / `.cometchat-sticker-bubble--outgoing` |
| Sticker image       | `.cometchat-sticker-bubble__image`                                            |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Stickers Plugin" icon="face-smile" href="/ui-kit/react/plugins/overview#built-in-plugins">
    Plugin behavior, keyboard, and conversation preview
  </Card>

  <Card title="Enable Stickers (Dashboard)" icon="face-smile" href="/fundamentals/stickers">
    Turn on the Stickers extension that produces these messages
  </Card>

  <Card title="Poll Bubble" icon="square-poll-vertical" href="/ui-kit/react/components/poll-bubble">
    Render poll messages
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>