Skip to content
Pinky UI

Email Template

A simple transactional email body — subscription, password reset, welcome, order confirmation, security alert — one column, one primary action.

  • surfaces
  • email
  • transactional
  • template
  • notification
Pinky UI

Subscription confirmed

You're on the list.

We'll send the next release notes straight to this inbox — no spam, unsubscribe any time.
Manage subscription
Sent to you@example.com because you subscribed at pinkyui.com.

Quick usage

usage
import { EmailTemplate } from "@pinky-ui/components";

<EmailTemplate
  brand="Pinky UI"
  eyebrow="Subscription confirmed"
  heading="You're on the list."
  body="We'll send the next release notes straight to this inbox — no spam, unsubscribe any time."
  ctaLabel="Manage subscription"
  ctaHref="#"
  footer="Sent to you@example.com because you subscribed at pinkyui.com."
/>

Presets

Subscription confirmation

Eyebrow + CTA to manage the subscription.

eyebrow={"Subscription confirmed"} ctaLabel={"Manage subscription"}

Password reset

Time-boxed CTA, no eyebrow.

heading={"Reset your password"} ctaLabel={"Reset password"}

Welcome

No CTA — a plain first-touch note.

heading={"Welcome to Pinky UI"}

Order confirmation

Eyebrow + order reference, CTA to the order detail.

eyebrow={"Order confirmed"} ctaLabel={"View order"}

Security alert

A new-device sign-in notice with a CTA to review activity.

eyebrow={"New sign-in detected"} ctaLabel={"Review activity"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
headingReactNode—Required. The email's one-line subject line, repeated as the body heading.
bodyReactNode—Required. The message.
brandstring—Shown next to the logo mark in the header.
logoReactNode—Overrides the default gradient mark.
eyebrowstring—Small label above the heading, e.g. a status word.
ctaLabelstring—Renders the primary button when given.
ctaHrefstring"#"Only meaningful with ctaLabel.
footerReactNode—Small print below a divider — recipient address, unsubscribe line, company address.

Accessibility

  • Semantic h1 for the heading; a real <a> for the CTA, not a styled span.
  • This is layout only, not email-safe markup — sending it as a real email needs a table-based renderer (e.g. react-email) for Outlook/Gmail's stripped CSS support.

Reduced motion

Static — no motion to disable.

When to use

  • A simple transactional email: confirmation, reset, receipt, welcome

When not to use

  • Marketing/newsletter layouts with multiple sections — that needs a dedicated block-based template builder, not this component