@email-builder/styles

The stylesheet for Email Builder's editor. Every rule is confined to the builder, and every colour comes from a CSS variable, so it can match your app's theme.

Install

npm i @email-builder/styles

Use

import "@email-builder/styles";

If your app uses CSS cascade layers (Tailwind v4 does), import the layered build instead:

import "@email-builder/styles/layered";

Match your app's colours

html.my-app .eb-root {
  --eb-accent: var(--app-primary);
  --eb-surface: var(--app-card);
  --eb-border: var(--app-border);
  --eb-text: var(--app-foreground);
  --eb-radius: var(--app-radius);
  --eb-font: inherit;
}

All variables and their defaults ship in @email-builder/styles/variables. The theming guide covers every variable, dark mode, and recipes for shadcn/ui, MUI, Bootstrap and Tailwind.

These styles apply to the editor only. The emails you send are inline-styled HTML and don't use them.

License

MIT