Registry

The emailcn registry ships components, blocks, themes, and font helpers in the shadcn registry format, in three styles: react-email, mjml-react, and jsx-email. Every item has the same name in every style — the style you configure decides which implementation you get.

Setup

Add a registries entry for this site, pointing at the style you want. See the shadcn registry documentation for all components.json fields and behaviors.

Copy{
  "registries": {
    "@emailcn": "https://emailcn.vercel.app/r/react-email/{name}.json"
  }
}

Swap react-email for mjml-react or jsx-email to use those styles:

Copy{
  "registries": {
    "@emailcn": "https://emailcn.vercel.app/r/jsx-email/{name}.json"
  }
}

You can replace @emailcn with another namespace; it only needs to match what you pass to shadcn add.

Usage

Item names are identical across styles, with no prefix:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @emailcn/buttons
Copy

Themes are theme-<id>:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @emailcn/theme-stripe
Copy

Blocks are block-<id>:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @emailcn/block-onboarding-default
Copy

Fonts (React Email and JSX Email styles) — e.g. default-fonts, tech-fonts:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @emailcn/default-fonts
Copy

Without a registry alias, use the full per-style URL:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://emailcn.vercel.app/r/react-email/buttons.json
Copy

Each style also serves its full index at https://emailcn.vercel.app/r/<style>/registry.json.