# Email UI (/docs/ui)



Start with a real email, see the rendered result, then copy the TSX into `src/ui/email`. Every example uses the same small set of Email SDK React components and works with any adapter after rendering.

<EmailExampleGallery />

## Add a template [#add-a-template]

Open any template above and run its registry command. The command adds the email component to `src/ui/email` and installs Email SDK, React Email, and React dependencies when they are missing.

```bash
bunx shadcn@latest add https://email-sdk.dev/r/verification-code.json
```

Then render the installed component with `renderEmail` and pass the returned `html` and `text` through your normal Email SDK client.

```tsx
import { renderEmail } from "@opencoredev/email-sdk/react";

const content = await renderEmail(<WelcomeEmail name="Ada" />);

await email.send({
  from: "Acme <hello@acme.com>",
  to: "ada@example.com",
  subject: "Welcome to Acme",
  ...content,
});
```

Routing, retries, fallback, scheduling, hooks, and telemetry still use the normal send pipeline.