# Pin Indicator

This example shows how to create a custom pin indicator for pinned messages. [Pinned messages](/chat/docs/javascript/pinned-messages/) highlight important content.

## Best Practices

- Use CSS-only pins for simple visuals; use components for richer data.
- Ensure pinned indicators don’t obscure message content.
- Respect permission rules for who can pin/unpin.
- Keep pin UI consistent between channel and thread views.
- Test pinned messages in grouped and quoted contexts.

## Custom Pin Indicator

### CSS Based Solution

Start with a simple CSS-only approach. The required classes are already toggled. Add a `::before` pseudo-element with a pin icon when a message is pinned.

```css
.str-chat__message--pinned .str-chat__message-bubble::before {
  content: "📌";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: papayawhip;
  font-size: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  z-index: 1;
  top: -10px;
}

.str-chat__message--other.str-chat__message--pinned
  .str-chat__message-bubble::before {
  right: -10px;
}

.str-chat__message--me.str-chat__message--pinned
  .str-chat__message-bubble::before {
  left: -10px;
}
```

![Custom Pin Indicator - CSS Based Solution](@chat-sdk/react/v14-latest/_assets/custom-pin-indicator-css.png)

### Component Based Solution

CSS is less flexible for JS interactions, so a component-based solution is useful. Here we show the user who pinned the message. Register your component with [`WithComponents`](/chat/docs/sdk/react/components/contexts/component-context/) so the nested message UI can read it from `ComponentContext`.

<Tabs>

</Tabs>

![Custom Pin Indicator](@chat-sdk/react/v14-latest/_assets/custom-pin-indicator.png)

### Read More

See [_Permissions v2_](/chat/docs/react/chat-permission-policies/) for pinning permissions.


---

This page was last updated at 2026-05-22T16:32:14.146Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/guides/customization/pin-indicator/](https://getstream.io/chat/docs/sdk/react/guides/customization/pin-indicator/).