Email SDK
UIProduct

Welcome

A useful first step after account creation.

Email preview
FromAcme <hello@acme.com>SubjectWelcome to AcmePreviewYour workspace is ready

Installation

npx shadcn@latest add https://email-sdk.dev/r/welcome.json

Copy this template into your app and customize its props, words, and links.

src/ui/email/welcome.tsx
import {
  EmailButton,
  EmailCard,
  EmailHeading,
  EmailText,
  ShadcnEmail,
} from "@opencoredev/email-sdk/react";

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <ShadcnEmail preview="Your workspace is ready">
      <EmailCard>
        <EmailHeading>Your workspace is ready</EmailHeading>
        <EmailText>
          Welcome, {name}. Send your first email or invite your team when you’re ready.
        </EmailText>
        <EmailText>✓ Connect a provider</EmailText>
        <EmailText>✓ Send a test email</EmailText>
        <EmailText>✓ Invite your team</EmailText>
        <EmailButton href="https://acme.com/dashboard">Open dashboard</EmailButton>
      </EmailCard>
    </ShadcnEmail>
  );
}

On this page