drupal/ui

Drupal Canvas Code Components library plus editor scaffolding, a home page, and sensible site defaults. Usable on any Canvas site, coupled or decoupled.

1.x-dev 2026-05-13 21:26 UTC

Requires

• drupal/canvas: ^1.4
• drupal/canvas_oauth: ^1
• drupal/drupal_cms_media: ^2
• drupal/simple_oauth: ^6 || ^7

GPL-2.0-or-later

README

A Drupal recipe that brings the shadcn/ui component library to Drupal Canvas. Each shadcn primitive is shipped as a Canvas Code Component — same component API, same Tailwind + CSS-variable token contract, same accessibility patterns — but authorable from inside the Canvas page editor and renderable by either Drupal's server-side renderer (coupled) or a Next.js front end (decoupled).

The recipe installs the components, the editor + CLI scaffolding to push and validate them, the global CSS asset library that defines the shadcn token contract, and sensible site defaults so a fresh site is ready to build pages immediately.

What ships

• Canvas Code Components (canvas.js_component.*) covering layout (Section, Hero, Header, Footer, CTA Banner), content (Card, Heading, Image, Carousel, Testimonial, etc.), navigation (Menu, Breadcrumb, Page Title), base UI (Button, Badge, Alert, Dialog, Tooltip, etc.), and form inputs.
• Component folder grouping — Canvas auto-creates a single "Other" folder containing all shipped JS components. Editors can reorganize via the editor sidebar (Structure → Canvas → Components). A future Canvas release will let recipes declare a category per component so the auto-folder lands items in meaningful groups out of the box; see .upstream-issues/folder-actionmethod-config-actions.md.
• Global CSS asset library (canvas.asset_library.global) — the shadcn token contract plus the .variation-* classes that drive the colored variations across container components.
• Canvas takeover of Stark's header and footer regions — config actions that opt those two regions into Canvas page editing (the main content region is handled automatically). Created with createIfNotExists so re-applying the recipe doesn't overwrite custom region content. Other Stark regions remain on Drupal's normal block layout.
• OAuth scope for the Canvas CLI (simple_oauth.oauth2_scope.canvas_js_component) — the scope @drupal-canvas/cli uses to authenticate canvas push.
• A demo home page at /home built as a canvas_page.
• A starter logo / favicon shipped as a file entity (used by the Stark theme — replace with your own brand).
• Site defaults: Stark as the public theme, page.front set to /home, the Linkset endpoint enabled so the Menu component can fetch menus from /system/menu/{name}/linkset.
• Block-disable actions that hide non-Code-Component blocks from the Canvas UI (does not delete them — just keeps the picker clean).

Variation system

Each container component (Section, Hero, Header, Footer, Card, CTA Banner, Menu) exposes a variation prop with seven values: primary, secondary, tertiary, accent, muted, light, dark. The shipped canvas.asset_library.global CSS defines .variation-* classes that scope-redefine the shadcn token set (--background, --foreground, --muted-foreground) within the component subtree, so nested text, headings, and buttons automatically pick up the variation's contrast colors. No per-component color overrides required.

Applying

composer require drupal/ui
drush recipe drupal/recipes/ui

Or from another recipe:

# my-recipe/recipe.yml
recipes:
  - ui

Requirements

• Drupal ^11
• drupal/canvas ^1.4
• drupal/canvas_oauth ^1
• drupal/drupal_cms_media ^2
• drupal/simple_oauth ^6 || ^7

License

GPL-2.0-or-later.