Cordwainer Elements

Adds the Cordwainer Elements web component library to your site as ready-to-use Drupal Single Directory Components (SDCs). If you've ever wanted polished buttons, form fields, dialogs, navigation, and dozens of other interface pieces without writing them from scratch, this module gives you a full set you can place in a template, a block, Layout Builder, or Canvas right away.

A "web component" is a small, self-contained piece of interface — say, a button or a date picker — built once and reusable in any HTML page, regardless of what framework (or no framework) built the rest of the site. Cordwainer Elements is a large, actively maintained library of these, and this module is the bridge that lets Drupal's component system see and use each one as a native SDC, complete with a themeable properties form.

Features

This module packages every Cordwainer Elements component as an individual SDC. Each one exposes its attributes and CSS custom properties as editable props, and its named slots as SDC slots, so site builders can configure a component through Drupal's normal UI instead of hand-writing markup or JavaScript. The component set is broad, covering most of what a typical site or design system needs:

• Form controls — button, checkbox, radio, radio-group, select, input, textarea, switch, range, combobox, color-picker, date-picker, time-picker, and more
• Navigation — header, footer, primary-navigation, secondary-navigation, breadcrumb, menu, tab-group, pagination, stepper
• Overlays and popovers — dialog, drawer, dropdown, popover, popup, tooltip
• Feedback and status — alert, badge, progress-bar, progress-ring, spinner, skeleton, tag
• Data display — card, data-table, accordion, details, tree, avatar, avatar-group, rating, relative-time, format-date, format-number, format-bytes
• Media — carousel, image-comparer, animated-image, qr-code, icon, icon-button

Use this module when you want a consistent, accessible, themeable component library across your whole site without maintaining that library's markup, styles, and behavior by hand — and without locking yourself into a JavaScript framework, since the underlying elements work anywhere HTML works.

Post-Installation

There is no configuration form to visit. Once you enable the module:

• Every Cordwainer Elements component appears wherever Drupal lists available components — the Canvas component picker, the SDC library on /admin/appearance (if enabled there), and as {{ include('cordwainer_elements:button') }}-style calls from your own Twig templates.
• Selecting a component in the UI shows a properties form generated from that component's attributes and CSS custom properties, so you can configure and theme it without touching code.
• The underlying element JavaScript and CSS are already vendored inside this module (no CDN calls at runtime) and are attached automatically the moment a component is placed on a page — there's nothing to enable manually in a library or text format.

If a component needed an import map to resolve a shared dependency (for example, the underlying Lit runtime), that map is attached automatically via hook_page_attachments() as a standard <script type="importmap"> tag — no Drupal Canvas dependency required.

Additional Requirements

None beyond Drupal core. This module relies entirely on core's Single Directory Components system and ships its own vendored copy of the Cordwainer Elements JavaScript and CSS, so no external module, API key, or CDN access is needed to use it. Because the underlying components are standard web components, visitors need a reasonably modern, evergreen browser (one that supports Custom Elements v1 and ES modules); no support is provided for legacy browsers.

Recommended modules/libraries

• UI Patterns pairs well with this module's generated components, giving site builders additional ways to expose and combine SDC props in the UI.
• Drupal Canvas is not required, but if it's installed, these components can be composed visually on the canvas the same way any other SDC can.

Similar projects

This module is generated output rather than a hand-maintained integration — it was produced from a Custom Elements Manifest by the Custom Elements Manifest to SDC Generator module. Where other component-library integrations on drupal.org are written and updated by hand for a specific set of elements, this module (and any other module produced the same way) stays in sync with its upstream library by regenerating from that library's manifest, rather than by manual porting.

Supporting this Module

This module has no dedicated funding page. If you'd like to support the component library it packages, see the Cordwainer Elements project itself. For issues specific to this Drupal integration, please use this project's issue queue on drupal.org.

Community Documentation

• cordwainer.dev — full component documentation, live demos, and theming guides for every element this module packages.
• @cordwainer/cw-elements on npm — the underlying package this module vendors, including release notes and version history.
• Custom Elements Manifest to SDC Generator — the tool used to generate this module; useful if you want to see how it was built, regenerate it against a newer version of the library, or generate SDCs from a different web component library.