Style the editor to match your product

Mina Editor ships with a base stylesheet and three ready-made theme presets. All visual tokens are CSS variables — override them to create fully custom themes.

Base styles

Base styles are automatically imported when you use the Editor or CompactEditor components — no manual CSS import needed.

Theme presets

01preset

notion

Clean, spacious layout with large headings and generous line-height — inspired by Notion

02preset

minimal

Zero decoration, tight spacing — useful as a base for fully custom designs

03preset

github

GitHub Markdown rendering style with monospace code blocks and bordered tables

Apply a preset by adding the theme class alongside the base mina-editor class on the wrapper element:

usage.tsx

<div className="mina-editor theme-notion">
  <EditorProvider initialState={initialState}>
    <Editor />
  </EditorProvider>
</div>

{/* Other available presets */}
<div className="mina-editor theme-minimal"> ... </div>
<div className="mina-editor theme-github"> ... </div>

Custom themes via CSS variables

Every visual token is a CSS variable scoped to .mina-editor. Override them in your own stylesheet or in a Tailwind @layer block.

theme.css

/* Apply to a custom class or override globally */
.mina-editor.theme-custom {
  /* Typography */
  --me-font-family: "Inter", sans-serif;
  --me-font-size-base: 15px;
  --me-line-height: 1.7;
  --me-letter-spacing: -0.01em;

  /* Headings */
  --me-heading-font-weight: 700;
  --me-h1-size: 2rem;
  --me-h2-size: 1.5rem;
  --me-h3-size: 1.25rem;

  /* Spacing */
  --me-block-spacing: 0.75rem;
  --me-paragraph-spacing: 1rem;

  /* Colors */
  --me-text: hsl(220 15% 10%);
  --me-muted: hsl(220 10% 50%);
  --me-selection-bg: hsl(210 100% 90%);
  --me-code-bg: hsl(220 13% 95%);
  --me-blockquote-border: hsl(220 13% 80%);

  /* Borders */
  --me-border-radius: 4px;
  --me-border-color: hsl(220 13% 88%);
}

Then apply it the same way as a preset:

usage.tsx

<div className="mina-editor theme-custom">
  <EditorProvider initialState={initialState}>
    <Editor />
  </EditorProvider>
</div>

Dark mode

The editor respects the system-level prefers-color-scheme media query and the dark class set by next-themes. Override dark mode tokens by scoping them under .dark .mina-editor.

theme.css

.dark .mina-editor.theme-custom {
  --me-text: hsl(220 15% 92%);
  --me-muted: hsl(220 10% 55%);
  --me-selection-bg: hsl(210 60% 30%);
  --me-code-bg: hsl(220 13% 14%);
  --me-blockquote-border: hsl(220 13% 30%);
  --me-border-color: hsl(220 13% 22%);
}

Built-in presets already include dark mode definitions — no extra work required when using theme-notion, theme-minimal, or theme-github.

Tailwind CSS integration

Theme variables map to Tailwind CSS custom properties when you define them in your tailwind.config theme.extend section. This lets you reference editor tokens throughout the rest of your UI.

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        "editor-text": "var(--me-text)",
        "editor-muted": "var(--me-muted)",
        "editor-border": "var(--me-border-color)",
      },
      fontFamily: {
        editor: "var(--me-font-family)",
      },
    },
  },
}

--Base styles are auto-imported when using the Editor component — no manual CSS import needed.
--All three presets include both light and dark mode definitions — no manual dark override needed.
--CSS variable overrides are isolated to .mina-editor — they do not leak into the rest of your app.
--You can mix a preset with partial overrides: apply theme-notion and then override a handful of variables for fine-tuning.

Extensions

Credits