---
title: "Invite"
description: "The server invite card a link unfurls into inside a message."
---

The server invite card a link unfurls into inside a 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 Invite — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add invite
``` Registry dependencies, installed with it: button.

Files written — React: components/ui/invite.tsx. Vue: components/ui/invite/Invite.vue, components/ui/invite/InviteEyebrow.vue, components/ui/invite/InviteBody.vue, components/ui/invite/InviteIcon.vue, components/ui/invite/InviteInfo.vue, components/ui/invite/InviteName.vue, components/ui/invite/InviteCounts.vue, components/ui/invite/InviteCount.vue, components/ui/invite/index.ts.

## Usage

React:

```tsx
import { Invite } from "@/components/ui/invite"
```

Vue:

```ts
import { Invite, InviteEyebrow, InviteBody, InviteIcon, InviteInfo, InviteName, InviteCounts, InviteCount } from "@/components/ui/invite"
```

## API reference

**`InviteCount`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `online` | `boolean \| undefined` | — | Green dot for the online count, muted for the member total. |

The registry exports `Invite`, `InviteEyebrow`, `InviteBody`, `InviteIcon`, `InviteInfo`, `InviteName`, `InviteCounts`, `InviteCount`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Use descriptive alternative text for a meaningful server image and an empty `alt` for a decorative one. The join action must remain a real button.

## Tokens

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