Skip to content

chore(docs): add styling customization guide for email editor#3099

Open
joaopcm wants to merge 1 commit intojoaopcm/editor-docs-canaryfrom
joaopcm/editor-docs-styling
Open

chore(docs): add styling customization guide for email editor#3099
joaopcm wants to merge 1 commit intojoaopcm/editor-docs-canaryfrom
joaopcm/editor-docs-styling

Conversation

@joaopcm
Copy link
Member

@joaopcm joaopcm commented Mar 20, 2026

Summary

Adds a new Styling page to the editor docs covering how to customize the editor's appearance with CSS.

Stacked on top of #3098.

What's covered

  • CSS variables — Full reference of all --re-* custom properties (colors, dimensions) with light/dark defaults
  • Dark mode — Both prefers-color-scheme and class-based (.dark) approaches
  • Data attribute selectors — Complete reference for every data-re-* attribute across all UI components:
    • Bubble menu ([data-re-bubble-menu], items, groups, separator)
    • Node selector ([data-re-node-selector], trigger, content, items)
    • Link selector ([data-re-link-selector], form, input, apply, unlink)
    • Link bubble menu ([data-re-link-bm])
    • Button bubble menu ([data-re-btn-bm])
    • Image bubble menu ([data-re-img-bm])
    • Slash command ([data-re-slash-command], items, categories, empty state)
  • Editor content classes.tiptap selectors for typography, layout (.node-columns, .node-section), buttons (.node-button), links (.node-link), alignment attributes, and column data types
  • Practical examples — Custom brand colors, custom bubble menu item styles, custom slash command appearance, styling editor content

Also adds a "Styling" card to the overview page.

Test plan

🤖 Generated with Claude Code


Summary by cubic

Adds a new Styling guide to the editor docs for customizing the editor with CSS variables, data attributes, and content classes. Also adds a “Styling” card to the editor overview.

  • New Features
    • Reference of --re-* variables with light/dark defaults, plus prefers-color-scheme and .dark support.
    • Complete data-re-* selector map for bubble menus, node/link selectors, slash command, and image/button menus.
    • .tiptap selectors for typography, layout, alignment, and column types.
    • Practical CSS examples for brand colors and UI tweaks.

Written for commit 681056f. Summary will update on new commits.

Adds a comprehensive guide covering CSS variables (--re-* properties),
data attribute selectors (data-re-*) for all UI components, editor
content classes (.tiptap), and practical examples for custom branding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link
Contributor

vercel bot commented Mar 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-email Ready Ready Preview, Comment Mar 20, 2026 8:07pm
react-email-demo Ready Ready Preview, Comment Mar 20, 2026 8:07pm

Request Review

@changeset-bot
Copy link

changeset-bot bot commented Mar 20, 2026

⚠️ No Changeset found

Latest commit: 681056f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@joaopcm joaopcm self-assigned this Mar 20, 2026
@joaopcm joaopcm changed the title docs(editor): add styling customization guide chore(docs): add styling customization guide for email editor Mar 20, 2026
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 2 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant