Skills
.Work. You
Rest

n-modal

Community

Craft dynamic modals with ease.

Software Engineering#modal#vue3#dialog#overlay#naive-ui#draggable#imperative-api
Authorjiaiyan
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Modal overlays and dialogs enable focused user interactions without navigating away from the page, simplifying tasks like confirmations, forms, and detail views.

Core Features & Use Cases

  • Built-in presets such as card and dialog for quick modal setup
  • Imperative API via useModal to create and control modals programmatically
  • Draggable support to reposition modals within the viewport
  • Flexible customization of size, position, and masking behavior
  • Mask control and focus trapping for accessible, reliable UX

Use cases include confirmations, content details, multi-step workflows, and floating panels.

Quick Start

Use the n-modal component or the useModal API to display a modal in a Vue app.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: n-modal
Download link: https://github.com/jiaiyan/naive-ui-skills/archive/main.zip#n-modal

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.