---
title: "Reply Preview"
description: 'A compact "replying to" bar showing the author, a truncated excerpt, or the slash command that was used.'
---

A reply preview keeps the referenced author and excerpt attached to the message that answers it. Compose the avatar, author, text, action and command parts so the compact row still reflects the content being referenced.

_Live example of Reply Preview — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add reply-preview
```

Files written — React: components/ui/reply-preview.tsx. Vue: components/ui/reply-preview/ReplyPreview.vue, components/ui/reply-preview/ReplyPreviewAvatar.vue, components/ui/reply-preview/ReplyPreviewAuthor.vue, components/ui/reply-preview/ReplyPreviewText.vue, components/ui/reply-preview/ReplyPreviewAction.vue, components/ui/reply-preview/ReplyPreviewCommand.vue, components/ui/reply-preview/index.ts.

## Usage

React:

```tsx
import { ReplyPreview } from "@/components/ui/reply-preview"
```

Vue:

```ts
import { ReplyPreview, ReplyPreviewAvatar, ReplyPreviewAuthor, ReplyPreviewText, ReplyPreviewAction, ReplyPreviewCommand } from "@/components/ui/reply-preview"
```

## API reference

**`ReplyPreview`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | The avatar, author and referenced text or command, in reading order. |
| `className / class` | `string` | — | Additional classes merged with the preview defaults. |

The registry also exports `ReplyPreviewAvatar`, `ReplyPreviewAuthor`, `ReplyPreviewText`, `ReplyPreviewAction` and `ReplyPreviewCommand`. Each part accepts the native attributes of the element it renders.

## Accessibility

The avatar is decorative by default; provide alternative text only when it adds information that the adjacent author name does not. Keep the referenced text in DOM order, and use a real button or link outside the preview when the row itself opens the original message.

## Tokens

Reply Preview reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.