Umbraco Kinds

What is it?

A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties that multiple extensions can share. Kinds ensure standardized structures across extensions and simplify definitions by providing predefined properties that extensions automatically inherit.

Documentation

Always fetch the latest docs before implementing:

• Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/kind

• Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation

• Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Workflow

• Fetch docs - Use WebFetch on the URLs above

• Ask questions - What extension type? What default properties to share?

• Generate files - Create kind manifest + consuming extensions based on latest docs

• Explain - Show what was created and how to test

Minimal Examples

Registering a Kind

import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-api';

export const customButtonKind: UmbExtensionManifestKind = { type: 'kind', alias: 'My.Kind.HeaderAppButton', matchType: 'headerApp', matchKind: 'button', manifest: { elementName: 'umb-header-app-button', }, };

Using a Kind in an Extension

const manifest = { type: 'headerApp', kind: 'button', // Uses the 'button' kind name: 'My Header App', alias: 'My.HeaderApp', meta: { label: 'My App', icon: 'icon-heart', href: '/my-app', }, };

Kind with Default Meta Properties

export const cardKind: UmbExtensionManifestKind = { type: 'kind', alias: 'My.Kind.DashboardCard', matchType: 'dashboard', matchKind: 'card', manifest: { elementName: 'my-dashboard-card', meta: { // Default meta properties size: 'medium', color: 'default', }, }, };

// Extension inherits defaults, can override const dashboard = { type: 'dashboard', kind: 'card', alias: 'My.Dashboard', name: 'My Dashboard', meta: { label: 'Stats', pathname: 'stats', // size and color inherited from kind }, };

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.