Obsidian Plugin UI Elements

This skill guides you through building and styling user interface elements in Obsidian plugins. It focuses on the DOM helpers, icon system, and platform considerations that let you create polished, accessible plugin interfaces.

When to Use This Skill

• Adding a ribbon icon or status bar item to a plugin
• Creating custom HTML structures inside modals, settings tabs, or views
• Choosing and customizing icons for plugin UI
• Supporting right-to-left (RTL) languages in plugin interfaces
• Updating UI elements dynamically based on plugin state

Overview

Obsidian exposes a rich set of DOM utilities on HTMLElement and provides top-level helpers for common UI patterns. At minimum, a plugin UI needs: