# DateSeparator

A simple date separator component rendered between messages. It is injected by `MessageList` and `VirtualizedMessageList`.

## Best Practices

- Use the default separator unless you need a custom date format or branded presentation.
- Keep custom separators lightweight because they are rendered inside the message list.
- Disable separators only if your UI already provides a clear time grouping.
- Prefer `formatDate` over rebuilding the component when only the label needs to change.
- If you need custom alignment or unread styling, provide your own component instead of relying on the legacy `position` and `unread` props.

## Basic Usage

Since it is injected by default, you usually do not need to import it unless you are building a custom separator. To disable date separators, use `disableDateSeparator` on `MessageList` or `VirtualizedMessageList`.

```tsx
import { DateSeparator } from "stream-chat-react";

const date = new Date();

<DateSeparator date={date} />;
```

## UI Customization

Register a custom separator with `WithComponents`:

```tsx
import {
  Channel,
  ChannelHeader,
  DateSeparator,
  MessageComposer,
  MessageList,
  Thread,
  Window,
  WithComponents,
  type DateSeparatorProps,
} from "stream-chat-react";

const CustomDateSeparator = ({ date }: DateSeparatorProps) => (
  <DateSeparator
    date={date}
    formatDate={(value) => `The message date is ${value.toDateString()}`}
  />
);

const App = () => (
  <WithComponents overrides={{ DateSeparator: CustomDateSeparator }}>
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageComposer />
      </Window>
      <Thread />
    </Channel>
  </WithComponents>
);
```

The `DateSeparatorProps` type still includes `position` and `unread`, but the default v14 separator no longer changes its UI based on those values. If your design depends on them, implement that behavior in your own custom separator.

## Props

| Prop         | Description                                                                  | Type                            |
| ------------ | ---------------------------------------------------------------------------- | ------------------------------- |
| `className`  | Optional class name for the separator root element.                          | `string`                        |
| `date`       | The date to format.                                                          | `Date`                          |
| `floating`   | Applies the floating separator styling used while scrolling.                 | `boolean`                       |
| `formatDate` | Custom formatter for the rendered label.                                     | `(date: Date) => string`        |
| `position`   | Legacy alignment hint available on the prop type for custom implementations. | `"left" \| "center" \| "right"` |
| `unread`     | Legacy unread hint available on the prop type for custom implementations.    | `boolean`                       |


---

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

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/utility-components/date-separator/](https://getstream.io/chat/docs/sdk/react/components/utility-components/date-separator/).