---
title: "Thread Preview"
description: "The thread hanging off a message: its name, its reply count and the last thing said."
---

The thread hanging off a message: its name, its reply count and the last thing said. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

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

## Installation

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

Files written — React: components/ui/thread-preview.tsx. Vue: components/ui/thread-preview/ThreadPreview.vue, components/ui/thread-preview/ThreadPreviewCount.vue, components/ui/thread-preview/ThreadPreviewLast.vue, components/ui/thread-preview/ThreadPreviewName.vue, components/ui/thread-preview/ThreadPreviewSpine.vue, components/ui/thread-preview/index.ts.

## Usage

React:

```tsx
import { ThreadPreview } from "@/components/ui/thread-preview"
```

Vue:

```ts
import { ThreadPreview, ThreadPreviewCount, ThreadPreviewLast, ThreadPreviewName, ThreadPreviewSpine } from "@/components/ui/thread-preview"
```

## API reference

**`ThreadPreview`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | Content rendered inside the component. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

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