# Rsvp
URL: https://remocn.dev/docs/typography/rsvp

A big invitation headline, then a what, when and where table that builds up to an accent install command.

- Install: `npx shadcn@latest add @remocn/rsvp`
- Vibe: playful
- Natural length: 117f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rsvp
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Rsvp } from "@/components/remocn/rsvp";

const RsvpScene = () => (
  <Rsvp
    headline="You are invited."
    fields={[
      { label: "What", value: "The 2.0 launch film" },
      { label: "When", value: "Tuesday, 9 AM" },
    ]}
    rsvp="acme.dev/launch"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="Rsvp"
    component={RsvpScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The `headline` rises word by word, then rows of label and value (the `fields`) build below it, ending on an accent row labeled `rsvpLabel` that shows the `rsvp` text and pulls focus as the other rows dim. The default `rsvp` is a Remocn install command, so pass your own link or command. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | `"You’re invited."` | Large invitation line at the top. |
| `fields` | `{ label: string; value: string }[]` | `DEFAULT_FIELDS` | Label and value rows shown under the headline. |
| `rsvpLabel` | `string` | `"RSVP"` | Label of the final, accent-colored row. |
| `rsvp` | `string` | `"npx shadcn add @remocn/whip-pan"` | Text of the final row, such as a link or command; empty hides the row. |
| `accent` | `string` | — | Color of the labels and the final row. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A launch or event invite that spells out what, when and where, ending on how to join.
- A closing call to action presented as a short itinerary, with the final row as a command or link.

## Don't use when
- You want a thank-you sign-off followed by a P.S. line — use `post-script`.
- You only need a bold release announcement line — use `embargo-lift`.
- The last beat is a countdown to going live — use `drop-timer`.