Docs
Next

Payload CMS

What @systhemaui/payload adds to a Payload project: blocks, editors, collections, globals, access control and modules.

@systhemaui/payload is the PayloadCMS integration for Systhema. It provides a comprehensive set of CMS-side building blocks: pre-built blocks, Lexical rich-text editors, field helpers, plugin options, and frontend rendering utilities. It's built on top of @systhemaui/core, @systhemaui/react, and @systhemaui/next.

This package is intended for full-stack PayloadCMS + Next.js apps. Start from the PayloadCMS template — it pre-installs every peer dependency and wires up the Next.js App Router files Systhema's plugin needs.

For projects adding payload-auth, see the known payload-auth login conflict.

What's includedLink to this section

  • withSysthema() config wrapper — drop-in around buildConfig() that registers blocks, editors, collections, plugins, and admin overrides.
  • Pre-built blocks — section, columns, feature, gallery, hero, accordion, carousel, card, quote, image/video/youtube, googleMaps, embed, button/chip/icon/avatar, form, richtext, stack, etc. Inline blocks (button, icon) support optional links via Advanced settings.
  • Four Lexical editor levels — root, region, fragment, slot, each with the right feature set for its context.
  • Custom Lexical features — balanceText, label, lead, small — typography utilities not built into PayloadCMS.
  • Field helpers — rangeField, slugField, nestedSlugField, buttonGroupField, colorSelectField, iconGroupField, iconPickerField, faIconPickerField, drawerField, messageField, richTextField, keyField.
  • Capability-based access control — built-in roles (dev, admin, editor, seoManager), capability registry, helpers for collection and field access.
  • General Settings global — a single general-settings global that hosts tabs for editor-facing project settings: Pages and Troubleshoot always, SEO, Posts, Emails and Cookie Consent when their options are on. See General Settings.
  • Frontend renderer — convertLexicalNodesToJSX resolves serialised Lexical content + custom blocks into Systhema React components for rendering.
  • Next.js gateway and sitemaps — server routes for SEO, redirects, custom routes (sys/[route]), per-collection sitemaps. src/proxy.ts imports systhemaGateway from @systhemaui/payload/gateway, a re-export of the @systhemaui/next/gateway function; either import works.
  • Payload Admin translations — reviewed Systhema Admin copy in English, Hungarian, French, Dutch, Czech, Slovak, and Arabic, plus typed helpers for consumer schemas, components, hooks, and endpoints. See Payload Admin translations.
  • Frontend messages and locales — reviewed Systhema UI catalogs in seven languages, project overrides, and opt-in next-intl routing without changing the locale-off project tree. These are independent from Admin translations. See Next locales.