Newsletter

A sign-up section in three layouts. Portraits puts four readers' faces around a centred form on a soft panel and lets them drift with the pointer. Spotlight is the same form with a glow under the cursor and a ticker of who just joined. Every layout follows your site's colour scheme — soft grounds by day, near-black by night. Issues sets the form beside a fanned stack of recent issues, the top one on a tilting card. One reveal when the section first appears; a form that turns into a thank-you when your promise resolves; nothing else moves unless the reader does.

Newsletter is built from library pieces: the field is Input, the action is Button, the ticker is Marquee and the top issue sits on a Tilted Card. Every piece of copy is a named part — Heading, Intro, Form, Proof, Ticker, Issues — so the words are yours.

Portraits

Four faces around the form, drifting with the pointer. Type an address and press Subscribe — the pill becomes a thank-you with a check that draws itself.

portraits: are up to four { src, alt } faces placed in the corners at md and up, each moving a little with the pointer at its own depth. Below md they gather in a row over the heading.
Return a promise fromonSubscribe: and the button stays busy until it settles — resolve to show the thank-you, throw to stay on the form so you can show your own error.
Proof: stacks up to five avatars with a plus and takes the line as children.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

npx shadcn@latest add @algorize-ui/newsletter

components/custom/blocks/NewsletterBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Step 1 installs these for you. Run them yourself only if you are adding Newsletter to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

button, input, marquee and tilted-card are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/button @algorize-ui/input @algorize-ui/marquee @algorize-ui/tilted-card

gsap is an npm package.

npm install gsap

Examples

Spotlight

A glow in the accent colour follows the pointer, and a ticker of who just joined runs along the foot. Switch the docs to dark mode to see the same panel by night.

Setvariant"spotlight": for the glow and the ticker. The panel, form and proof restyle themselves for light and dark mode; the glow uses --primary, so pass accent to colour it.
Ticker: takes items of { name, avatar?, when } and runs them left on a MarqueeBlock that pauses under the pointer.

Issues

Copy and form on the left, the latest three issues fanned on the right. Hover the stack — it spreads, and the top card tilts.

Setvariant"issues": for the two-column layout, left-aligned copy, on a white ground.
Issues: takes items of { title, date, excerpt, cover?, tag? }: the first is the card in front — on a TiltedCard, with its cover and tag — and the next two sit behind it, turned.

Features

Built from the library

Input for the field, Button for the action, Marquee for the ticker, Tilted Card for the top issue. Install this one item and all four come with it.

A form that says what happened

The button stays busy while your promise runs, then the pill becomes a thank-you with a check that draws itself. A rejection returns to the form for your own message.

One reveal, then the pointer

Heading, intro, form and proof rise in once. After that the faces drift, the glow follows and the stack spreads only when you move. Reduced motion renders the finished state.

Accessible by default

A real email field with a label, a submit button with a busy state, a status region for the thank-you, and faces that are decorative unless you give them alt text.

Props Reference

Prop	Type	Default	Description
`variant`	`"portraits" \| "spotlight" \| "issues"`	`"portraits"`	The layout.
`portraits`	`{ src: string; alt?: string }[]`	`[]`	Up to four faces for the `portraits` layout.
`accent`	`string`	theme primary	Colour of the button, tags and the spotlight glow.
`reveal`	`"in-view" \| "immediate"`	`"in-view"`	When the reveal plays.
`children`	`ReactNode`	—	The parts, in reading order.

Newsletter.Form

Prop	Type	Default	Description
`onSubscribe`	`(email: string) => void \| Promise<void>`	—	Called on submit. A promise holds the busy state; a rejection stays on the form.
`placeholder`	`string`	`"[email protected]"`	Field placeholder.
`action`	`string`	`"Subscribe now"`	Button label.
`successTitle`, `successText`	`string`	`"You're subscribed"`, `"Look out for the next edition in your inbox."`	The thank-you.

Newsletter.Proof, Ticker, Issues

Part	Prop	Type	Description
`Proof`	`avatars`	`string[]`	Up to five faces, stacked; the line is the children.
`Ticker`	`items`	`{ name: string; avatar?: string; when: string }[]`	Who just joined, run as a marquee (`spotlight`).
`Issues`	`items`	`{ title: string; date: string; excerpt: string; cover?: string; tag?: string }[]`	The first is the card in front, the next two sit behind (`issues`).

Heading and Intro take children and any heading / paragraph props.