skills.rest
pimcore
pimcoreOFFICIAL
Explore all skills by this author →
Website𝕏@pimcoreGitHub

pimcore-studio-ui-modals

Integrate declarative and imperative modal components in Pimcore Studio UI.

13|Updated Apr 2, 2026
Search Tags:#react#hooks#modal#ui-components#pimcore#studio-ui
One-click install
npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-modals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pimcore-studio-ui-modals
Source: https://github.com/pimcore/skills/tree/main/skills/pimcore-studio-ui-modals
Command: npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-modals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pimcore Studio UI requires consistent modal patterns across applications; this skill provides a coherent set of modal building blocks, including declarative Modal and WindowModal components, plus imperative hooks (useFormModal, useAlertModal, useStudioModal) to standardize dialogs, confirmations, and alerts across projects.

Core Features & Use Cases

  • Declarative Modal: full control over open state, onCancel, title, and flexible content for complex UIs.
  • WindowModal: draggable, resizable window-style dialogs for multi-step workflows.
  • useFormModal: confirm, input, textarea, and upload dialogs with validation and async actions.
  • useAlertModal: quick info, success, error, and warning alerts.
  • useStudioModal: cross-iframe modal orchestration and a unified API surface.
  • Choosing declarative vs imperative patterns based on UX needs and complexity.

Quick Start

Install Pimcore Studio UI dependencies, import the modal components from @pimcore/studio-ui-bundle, and render a basic modal controlled by state.

Frequently Asked Questions about pimcore-studio-ui-modals

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

FAQPage Schema
How do I create modal dialogs in Pimcore Studio UI using React?▼

To create modal dialogs in Pimcore Studio UI, import declarative Modal and WindowModal components from @pimcore/studio-ui-bundle and control the open state with React hooks for flexible content rendering.

What is the difference between declarative and imperative modal patterns in React?▼

Declarative modal patterns offer full control over the open state and content rendering, while imperative hooks like useFormModal and useAlertModal trigger confirmations and inputs programmatically without managing state explicitly.

How do I show confirmation and alert dialogs with validation in a React application?▼

Use the useFormModal hook for confirmations, text inputs, and uploads with validation, or use the useAlertModal hook to quickly display info, success, error, and warning alerts in your React application.

Can I use draggable and resizable window-style modals for multi-step workflows?▼

Yes, the WindowModal component provides draggable and resizable window-style dialogs designed specifically for handling complex multi-step workflows within the Pimcore Studio UI environment.

How do I orchestrate modals across iframes in Pimcore Studio UI?▼

Use the useStudioModal hook to handle cross-iframe modal orchestration, providing a unified API surface to manage modal instances across different iframe contexts within Pimcore Studio UI.

When should I choose declarative Modal over imperative hooks for front-end React patterns?▼

Choose declarative Modal for complex UIs requiring full control over open state and content, and choose imperative hooks like useFormModal or useAlertModal for standardized dialogs, confirmations, and quick alerts.

Related Skills

Explore More Software Engineering Skills→
pimcorepimcore
13

pimcore-studio-ui-notifications-toasts

Centralize toast notifications using the useMessage hook in Pimcore Studio UI.

Official
Intermediate
jiaiyanjiaiyan
8

n-dialog

Create and manage Naive UI modal dialogs via useDialog.

Community
Advanced
pimcorepimcore
13

pimcore-studio-ui-react-components

Standardize Pimcore Studio UI React component structure with .styles.tsx files and interfaces.

Official
Advanced
hgxszhj-pixelhgxszhj-pixel
2

react-native-dev

Guide React Native and Expo app development with UI, state, and deployment.

Community
Advanced