umbraco-modals

Create custom modals and sidebars in the Umbraco backoffice.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-modals-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-modals
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-modals
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-modals-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides the foundational knowledge and code examples to create custom modals and sidebars within the Umbraco backoffice, enhancing user interfaces and workflows.

Core Features & Use Cases

  • Modal Creation: Define custom modal tokens, elements, and manifests for reusable UI components.
  • Integration: Learn how to open modals programmatically using the Modal Manager Context.
  • Use Case: Develop a custom modal to allow editors to select specific content items or configure advanced settings directly within the Umbraco backoffice without leaving the current page.

Quick Start

Use the umbraco-modals skill to generate a basic sidebar modal with a confirmation button.

Frequently Asked Questions about umbraco-modals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom modal in the Umbraco backoffice?

To create a custom Umbraco backoffice modal, you define custom modal tokens, elements, and manifests. This approach enables reusable interactive UI components for content selection or advanced settings configuration directly within the editor view.

How do I open an Umbraco sidebar programmatically?

You open an Umbraco sidebar programmatically by integrating with the Modal Manager Context. This runtime invocation mechanism handles the display and lifecycle of custom sidebar UI components triggered by user actions.

What is a modal token in Umbraco and how does it work?

A modal token in Umbraco is a defined reference that maps to a custom UI component. It works with elements and manifests to register and render interactive modals or sidebars within the backoffice extension system.

Do I need LitElement to build custom Umbraco backoffice modals?

Yes, understanding LitElement is required for custom Umbraco backoffice modal development. You use it to build the web components that render the interactive UI elements within the modal or sidebar interface.

Can I configure advanced settings without leaving the current Umbraco page?

Yes, you can configure advanced settings without leaving the current Umbraco page by building a custom modal. This allows editors to select content or adjust configurations directly through an overlay interface.