craft-garnish

Provides a UI toolkit for building Craft CMS control panel interfaces.

66|6|Updated Apr 7, 2026

Search Tags:#javascript #widgets #garnish #craft cms #cp ui

Ready to run

npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-garnish

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: craft-garnish
Source: https://github.com/michtio/craftcms-claude-skills/tree/main/skills/craft-garnish
Command: npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-garnish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Garnish provides a complete, standards-compliant JavaScript UI toolkit for Craft CMS' control panel, enabling CP widgets, modals, and drag interactions to work consistently across plugins.

Core Features & Use Cases

Garnish.Base class system with event handling and clean destruction.
UI widgets: Modal, HUD, DisclosureMenu, MenuBtn, CustomSelect, Select, etc.
Drag system: BaseDrag, DragSort, DragDrop, DragMove; accessible keyboard navigation.
Craft integration: GarnishAsset, Craft.* class pattern, webpack externals.

Quick Start

Install Garnish in your Craft CP project and begin prototyping CP UI components like modals, HUDs, and drag interactions.

Frequently Asked Questions about craft-garnish

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

FAQPage Schema

How do I build custom modals and HUDs in a Craft CMS plugin?▼

Use the Garnish UI toolkit to build custom modals, HUDs, and menus in Craft CMS plugins. It provides a Garnish.Base class system with event handling, clean destruction, and proper asset loading for consistent control panel UI components.

What's the best way to add drag and drop interactions to Craft CMS control panel widgets?▼

The best way to add drag and drop to Craft CMS control panel widgets is the Garnish drag system. It includes BaseDrag, DragSort, DragDrop, and DragMove with accessible keyboard navigation for consistent CP interactions.

Can I use Garnish UI components without the Craft.* class pattern?▼

Garnish UI components integrate tightly with the Craft.* class pattern and GarnishAsset pipeline. The toolkit is designed specifically for Craft CMS control panel contexts, relying on webpack externals and proper asset loading for CP workflows.

Does Garnish support ARIA compliance and focus trapping for accessible Craft CMS modals?▼

Yes, Garnish supports ARIA compliance and focus trapping for accessible Craft CMS modals. The toolkit ensures proper UI layer management, focus trapping, and standards-compliant behavior across modals, HUDs, menus, and disclosure components.

Why do my Craft CMS plugin's custom select widgets break outside the control panel?▼

Garnish custom select widgets are built specifically for Craft CMS control panel contexts. Using them outside CP workflows breaks because the toolkit depends on GarnishAsset loading, Craft.* class patterns, and webpack externals tied to the control panel environment.