UI Patterns (SDC in Drupal UI)

Define and expose self-contained UI components as Drupal plugins and use them seamlessly in Drupal development and site-building.

UI components are reusable, nestable, guided by clear standards, and can be assembled together to build any number of applications.

Examples: card, button, slider, pager, menu, toast...

UI Patterns 2.x (with SDC)

UI Patterns 2 is leveraging Drupal Core's SDC (Single Directory Components) API. It exposes components:

• as blocks in Block Layout, Layout Builder ....
• as layouts in Layout Builder, Field Layout...
• within field formatters in Manage Display, Layout Builder, Views...
• as display & rows in Views

Each integration is a sub-module to activate.

Component library

The UI Patterns Library sub-module generates a pattern library page to be used as documentation for content editors or as a showcase for business and clients:

Compatibility with UI Patterns 1.x

The UI Patterns Legacy sub-module provides:

• A compatibility layer for some simple code (not config) still using UI Patterns 1.x API
• A drush command to migrate your UI Patterns 1.x components to SDC

Ecosystem

Some recommended modules:

• sdc_devel: development aids to Single-Directory Components developers, with a powerful component validator
• storybook: Create and manage your components from a Storybook instance.
• ui_patterns_ds: Use SDC as Display Suite field templates.
• ui_patterns_field_group: Use SDC as Field Group formatters.

UI Patterns is powering Display Builder, the modern visual builder built on Design System principles:

UI Patterns 1.x (before SDC)

Before SDC, UI Patterns 1.x was already providing UI components in Drupal, which can be used:

as Layouts plugins (every pattern field is a layout region), which can be used by modules like Display Suite, Panels, Layout Paragraphs, Views Layout... Learn more as Views rows, mapping rows fields to pattern fields. Learn more with Field Group, as provided by the Field Group module. Learn more with Display Suite, to format Display Suite field templates. Learn more

Migrate to UI Patterns 2.x

UI Patterns 2.x is proposing drush commands and update hooks to migrate:

• UI Patterns 1.x components definitions to SDC
• your display configurations

UI Suite

UI Suite provides a cohesive set of modules to implement full design systems while preserving and improving the Drupal site building experience.

UI Patterns can be used as standalone, but shines with other UI Suite modules. Together, they provide a a full API to implement design systems:

Showcases

UI Suite themes are all using UI Patterns 1.x and 2.x:

Bootstrap 4 & 5 DSFR (French Gov) USWDS (US Gov) See components/ folder See components/ folder See components/ folder DaisyUI Material Design 2 Mozilla Protocol See components/ folder See components/ folder See patterns/ folder