Umbraco Modals
This handles modal dialogs and sidebars in Umbraco's backoffice using their official extension system. You get token-based type safety for data in and out, plus route registration if you need deep-linking. It pulls from the real Umbraco docs and includes working examples from their source tree, so you're implementing modals the way the framework expects. The workflow is straightforward: fetch current docs, answer a few questions about dialog versus sidebar and what data flows where, then generate the token, element, and manifest. It references related foundation skills for context API and state management when those patterns come up, which they will if your modal does anything beyond the basics.
- skills.sh installs
- 398
- GitHub stars
- 27
- last updated
- Aug 21, 2026
Install
$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-modals --agent claude-codeInstalls into .claude/skills of the current project.
Files
Umbraco Modals
What is it?
A modal is a popup layer that darkens the surroundings and comes with a focus lock. The modal extension type is used to configure and present dialogs and sidebars within the Umbraco backoffice. Modals can be opened via routes (for deep-linking) or at runtime using the Modal Manager Context, and they use a token-based system for type-safe communication.
Documentation
Always fetch the latest docs before implementing:
- Main docs: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/modals
- Custom Modals: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/modals/custom-modals
- Route Registration: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/modals/route-registration
- Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
- Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/umbraco/umbraco-cms-backoffice-skills
- Categories
- Documentation, .NET & C#
- First seen
- Jun 3, 2026
More from umbraco/umbraco-cms-backoffice-skills
All 76- Umbraco Entry Point397
- Umbraco Granular User Permissions397
- Umbraco Header Apps397
- Umbraco Health Check397
- Umbraco Icons397
- Umbraco Package View397
- Umbraco Property Action397
- Umbraco Property Editor Schema397
- Umbraco Review Checks397
- Umbraco Sections397
- Umbraco Block Editor Custom View396
- Umbraco Bundle396
- Umbraco Collection396
- Umbraco Current User Action396
- Umbraco Entity Actions396
- Umbraco File Upload Preview396
- Umbraco Picker Data Source396
- Umbraco Collection Action395
- Umbraco Global Context395
- Umbraco Kinds395
- Umbraco Property Value Preset395
- Umbraco Conditions394
- Umbraco Menu394
- Umbraco Search Provider394
Recommended
More Documentation
wechat-studiochouheiwa/wechat-studio微信公众号内容创作全流程工具，支持 Markdown 主题排版、Dan Koe 风格写作、AI 去痕、图片上传、图文草稿和小绿书发布。Use this skill when the user asks about WeChat Official Account publishing, converting Markdo397skills.sh installs
umbraco-granular-user-permissionsumbraco/umbraco-cms-backoffice-skillsImplement granular user permissions in Umbraco backoffice using official docs397skills.sh installsumbraco-header-appsumbraco/umbraco-cms-backoffice-skillsImplement header apps in Umbraco backoffice using official docs397skills.sh installsumbraco-health-checkumbraco/umbraco-cms-backoffice-skillsImplement health checks in Umbraco backoffice using official docs397skills.sh installsumbraco-package-viewumbraco/umbraco-cms-backoffice-skillsImplement package views in Umbraco backoffice using official docs397skills.sh installsumbraco-property-actionumbraco/umbraco-cms-backoffice-skillsImplement property actions in Umbraco backoffice using official docs397skills.sh installs