Component reference

Letter

A newsletter issue written as a letter, with the signup as its P.S. Send it and it flies off as a paper plane, gets sealed in an envelope, keyed out in Morse or dropped in a mailbox.

The Weekly Diff

No. 042 ·

Dear reader,

This week we split the machine into parallel regions. Each one keeps its own clock, so a slow exit on one side no longer holds up the other.

It broke twice on the way. The second time taught us that guards need to see the latest context, not the one they were born with.

Until next Thursday,
Jana

2,481 readers

<Letter variant="minimal" />Clean surfaces and measured motion.

Installation

Use the shadcn CLI to copy the component source and its dependencies into your own project. Only the Minimal world, with motion, plus the Ovio theme, world, motion, format items.

npx shadcn add JanaSundar/ovio/letter-minimal
↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.

Usage

Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.

TSXvariant="minimal"
import { Letter } from "@/components/ovio/letter/letter"

<Letter
  variant="minimal"
  letter={issue}
  subscribers={2481}
  onSubscribe={subscribe}
/>

Built with: Motion for React: useAnimate sequences, arc() paths (Retro: Morse keying)
Motion in Minimal: Small springs, opacity and layout shifts that show state.

Props

Control the data, selected world, animation behavior, and callbacks.

PropTypeDescription
letter{ name; issue; date; greeting?; body; signOff?; signature }The issue. body is one string per paragraph; an ISO date is formatted, greeting defaults to “Dear reader,”.
variantdefault minimalminimalcraftretrotoyWhich world to render. Uses the nearest OvioProvider when there is one.
subscribersnumberReaders so far, printed under the P.S. One is added when the letter is sent.
onSubscribe(email: string) => Promise<void>Called with the email from the P.S. The letter goes out once it resolves; a rejection shows its message.
classNamestringMerged onto the root.