umbraco-modals

Create modal dialogs and sidebars in the Umbraco backoffice.

4|Updated Mar 6, 2026

Search Tags:#ui #extension #modal #sidebar #dialog #umbraco #backoffice

Ready to run

npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-modals-albanist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-modals
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/extensions/umbraco-modals
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-modals-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement modals (dialogs and sidebars) within the Umbraco backoffice, providing a structured way to interact with users and display information.

Core Features & Use Cases

Modal Creation: Define custom modal tokens, elements, and manifests.
Integration: Learn how to open modals using the Modal Manager Context or via route registration for deep-linking.
Use Case: Create a "Confirm Deletion" modal that appears when a user tries to delete an item, requiring explicit confirmation before proceeding.

Quick Start

Use the umbraco-modals skill to create a simple confirmation modal with a 'Confirm' and 'Cancel' 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 custom modals in the Umbraco backoffice?▼

You implement Umbraco backoffice modals by defining custom modal tokens, elements, and manifests. This structured approach allows you to interact with users and display information within your custom extensions.

How does the Modal Manager Context work for Umbraco dialogs?▼

The Modal Manager Context allows you to open modals programmatically within the Umbraco backoffice. Alternatively, you can use route registration for deep-linking to provide direct access to specific modal states.

When do I need route registration for Umbraco sidebar dialogs?▼

You need route registration for Umbraco sidebar dialogs when you want to enable deep-linking. This allows users to access specific modal states directly via URL, rather than only opening them through the Modal Manager Context.

Do I need to understand Umbraco extension types to implement backoffice modals?▼

Yes, implementing backoffice modals requires an understanding of Umbraco's extension types and component-based architecture. This knowledge is necessary to properly register manifests and integrate modal elements.

What is the best way to add a confirmation dialog before deleting an item in Umbraco?▼

The best way to add a confirmation dialog is to implement a custom modal with 'Confirm' and 'Cancel' buttons. This ensures explicit user confirmation is captured before proceeding with the deletion action.