SDX React Base

SDX React Base is a hidden base theme that provides React component implementations for standard Drupal theme hooks. It serves as the foundation for building React-powered Drupal themes with the SDX DRAST theme engine, so you don't have to re-implement common templates from scratch.

Set base theme: sdx_react_base in your theme's .info.yml and start building. All 50+ template overrides are inherited automatically.

Features

Template overrides

• 50+ Drupal theme hooks implemented as React components
• Form elements: input, textarea, select, checkboxes, radios, datetime, details, fieldset, vertical tabs
• Block system: generic block + specific overrides for page title, breadcrumb, messages, menu blocks
• Views: views-view, views-view-table, views-view-unformatted, views-mini-pager
• Navigation: menu, breadcrumb, pager, local tasks, local actions
• Administration: status-report, system-modules, system-themes-page, admin-page, confirm-form
• Fields: field, field-multiple-value-form
• Utility: table, image, links, dropbutton, page-title

SPA shell

• BaseLayout component with region rendering and content area
• Toast notification system for Drupal status messages
• Confirm modal portal for entity delete operations
• ComponentRegistryProvider for automatic template resolution

Shared components

• SidePanel: dual-mode component for content display and Drupal form loading via AJAX
• useDrupalForm: hook encapsulating AJAX form handling, CSRF tokens, multi-step forms, and response parsing
• ErrorBoundary: graceful error display with retry and component stack logging
• useFocusTrap: focus trap hook for modals and panels
• Select: native and styled select component
• TagInput: pill-based autocomplete input
• DropdownMenu: accessible dropdown menu
• BlockShell: block wrapper with contextual links support

Code quality

• Full TypeScript with proper interfaces and typed hooks
• All imports use SDX aliases (@sdx/*, @theme:sdx_react_base/*), no relative paths
• All user-facing strings use Drupal's t() translation function
• Accessibility attributes throughout (aria-modal, aria-label, role, focus management)

How It Works

Extend the base theme in your own theme's .info.yml:

name: 'My Admin Theme'
type: theme
engine: sdx
base theme: sdx_react_base
dependencies:
  - sdx:sdx
  - sdx:sdx_react
  - sdx_drast:sdx_drast

Your theme inherits all template overrides. Override any template by creating a same-named file in your theme's templates/ directory. The SDX build pipeline handles the full inheritance chain automatically.

Additional Requirements

• Drupal 10.3+ or 11
• PHP 8.3+
• SDX core module with sdx_react, sdx_typescript, sdx_sass, and sdx_router enabled
• SDX DRAST (Theme Engine)
• Node.js 18+ for building components

Recommended modules/libraries

• sdx_ssr (included in SDX) for server-side rendering
• SDX Aurora as a reference implementation of a full admin theme built on this base

Supporting this Theme

Report bugs and feature requests in the issue queue.

Part of the SDX ecosystem.

Community Documentation

- Coming Soon -