Talking Drupal #511 - UI Suite 2.0

Jul 14, 2025

Pierre Dureau, a Drupal veteran and UI Suite creator, dives into the transformative UI Suite 2.0 release. He discusses its module ecosystem and the new features that enhance front-end development. The conversation covers the 'Field Formatter Range' module, design system integration, and the balance between coding and site configuration. Dureau emphasizes the importance of structured workflows and user-friendly tools for developers. Engaging with the Drupal community, he highlights the future of UI Suite and invites listeners to contribute.

Ask episode

AI Snips

Chapters

Transcript

Episode notes

INSIGHT

UI Suite Is Community + Tooling

UI Suite is both a community and a collection of modules to integrate design systems with Drupal's APIs.
It provides production-ready example themes and tooling to make design-system integration repeatable.

ADVICE

Expose Components Via Clear YAML

Treat front-end developers as plugin providers: document components and expose them via YAML so Drupal can consume them.
Use simple, understandable YAML (props, slots, attributes) so display tools can integrate components cleanly.

INSIGHT

Themes Often Hide Business Logic

Drupal themes are rarely shareable because they contain project-specific business logic.
That makes theme reuse hard and discourages publishing reusable themes on Drupal.org.

Get the Snipd Podcast app to discover more snips from this episode

Get the app

Today we are talking about The UI Suite Module, It's module eco-system, and what's new in the 2.0 release with guest Pierre Dureau. We'll also cover Field Formatter Range as our module of the week.

For show notes visit: https://www.talkingDrupal.com/511

Topics

What is UI Suite?
UI Suite 2.0: Major Updates and Features
Introduction to UI Suite Recipes
Challenges with Drupal Themes
Site Templates and UI Suite
Component Compatibility and Community Education
Design System Modules and Best Practices
Experience Builder and UI Suite Integration
Modernizing Display Tools
Introducing the Distributor Tool
Future of UI Suite and Core Integration
Getting Involved with UI Suite

Resources

UI Suite
[Meta] Make Drupal the first "design-system native" CMS + Unify & simplify render & theme systems
sdc_devel
Do's Don'ts For SDC
- use all the props & slots in templates
- use the automatically defined attributes property
- do not define any props or slots that are unused
- define in the YAML all the props & slots you use in templates
- props schema must be understandable by the display builder: no empty objects, empty arrays, arrays of empty objects, bag of props…
- Example Fix
Display Builder
Adopt UI Patterns 2 to prepare developers and users for Experience Builder
Getting started

Guests

Pierre Dureau - drupal.org/project/ui_suite pdureau

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi JD Leonard - jdleonard

MOTW Correspondent

Martin Anderson-Clutz - mandclu.com mandclu

Brief description:
- Have you ever wanted to show only a subset of field values on your Drupal entity displays? There's a module for that.
Module name/project name:
- Field Formatter Range
Brief history
- How old: created in Jan 2024 by Florent Torregrosa (Grimreaper), but today's guest Pierre is also a maintainer
- Versions available: 8.x-1.6
Maintainership
- Minimally maintained & Maintenance fixes only
- Security coverage
- NO open issues
Usage stats:
- 1,362 sites
Module features and usage
- Unlike some competing solutions, this module uses third party settings to work on virtually any formatter for a multivalued field
- As part of the configuration, a site builder can specify the offset (where to start), the number of field values to show, and the order in which to show them.
- The order can be standard or reverse, or it can list them in a random order
- The module page gives the example of an entity with 15 images attached, and being able to show only the first 5. Or maybe only the 5 most recent?
- I think if you combined this module with the Custom Field module module we talked about in episode #505, you could achieve some interesting things with simple configuration. For example, you could have an FAQ page and have the teaser for it show three random answers for it.