ui_patterns

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 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

There is also a large ecosystem of modules:

Component library

Like UI Patterns 2.x, the UI Patterns Library sub-module generates a components library page.

UI Patterns 1.x also integrates with with tools like Wingsuit or modules like Component Libraries thanks to definition overrides.

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