UI Patterns

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

Also called "components", UI patterns 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...

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:

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

Site building features

Once created, the patterns 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

Each integration is a sub-module to activate. There is also a large ecosystem of modules:

Feel free to propose other integrations.

UI Suite Initiative

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:

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