canvas-component-naming
Use simple, generic names. Never prefix component names with the project or site name. Components should be reusable and their names should describe their purpose, not their origin.
Use kebab-case for component names (for example, machineName,
src/components/<name>/, and story filenames).
When copying and modifying an example component, keep the original name unless the component serves a fundamentally different purpose. When creating a new component without an example, choose a simple, descriptive name.
# Correct - simple, descriptive names
footer
hero
navigation
contact-form
# Wrong - prefixed with project/site name
nebula-footer
acme-hero
mysite-navigation
projectx-contact-form
This ensures components remain portable and their names clearly communicate their function rather than their project context.
More from drupal-canvas/skills
canvas-component-definition
Start here for any React component task to enforce the canonical Canvas
90canvas-component-metadata
Define valid component.yml metadata for Canvas components, including props,
88canvas-component-utils
Use utility components to render formatted text and media correctly. Use when
75canvas-data-fetching
Fetch and render Drupal content in Canvas components with JSON:API and SWR
75canvas-component-composability
Design Canvas-ready React components with slots and decomposition-first
72canvas-styling-conventions
Style Canvas components with Tailwind CSS 4 theme tokens and approved utility
72