---
title: "Channel Welcome"
description: "The header that opens a channel, shown above its very first message."
---

The header that opens a channel, shown above its very first message. 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 Channel Welcome — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add channel-welcome
```

Files written — React: components/ui/channel-welcome.tsx. Vue: components/ui/channel-welcome/ChannelWelcome.vue, components/ui/channel-welcome/ChannelWelcomeIcon.vue, components/ui/channel-welcome/ChannelWelcomeTitle.vue, components/ui/channel-welcome/ChannelWelcomeDescription.vue, components/ui/channel-welcome/ChannelWelcomeAction.vue, components/ui/channel-welcome/ChannelWelcomeDate.vue, components/ui/channel-welcome/index.ts.

## Usage

React:

```tsx
import { ChannelWelcome } from "@/components/ui/channel-welcome"
```

Vue:

```ts
import { ChannelWelcome, ChannelWelcomeIcon, ChannelWelcomeTitle, ChannelWelcomeDescription, ChannelWelcomeAction, ChannelWelcomeDate } from "@/components/ui/channel-welcome"
```

## API reference

**`ChannelWelcomeDate`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dateTime` | `string \| undefined` | — | Machine-readable date for the rendered `<time>` element. |
| `children` | `React.ReactNode \| undefined` | — | Optional children value. |

The registry exports `ChannelWelcome`, `ChannelWelcomeIcon`, `ChannelWelcomeTitle`, `ChannelWelcomeDescription`, `ChannelWelcomeAction`, `ChannelWelcomeDate`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## 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

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