n-notification

Name: n-notification
Availability: InStock
Author: jiaiyan

Create, update, and destroy toast notifications in Naive UI apps.

8|3|Updated Mar 13, 2026

Search Tags:#ui #notification #provider #dynamic-content #placement #toast #naive-ui

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-notification

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-notification
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-notification
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-notification

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Notification component provides a centralized way to display toast messages and alerts across an application, ensuring consistent UX and unobtrusive feedback.

Core Features & Use Cases

Multiple types: info, success, warning, and error notifications with customizable content.
Flexible placement: position notifications in various screen corners or panels.
Dynamic content: update or replace an existing notification content after creation.
Auto close & limits: configure auto-dismiss duration and maximum visible notifications to avoid clutter.
Provider-driven API: expose create, destroyAll, and type-specific helpers to integrate with app logic.

Quick Start

Invoke the notification API to display a quick message after a user action.

Frequently Asked Questions about n-notification

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

FAQPage Schema

How do I display toast notifications in a Naive UI application?▼

To display toast notifications in Naive UI, use a provider wrapper component to expose the notification API, then invoke create or type-specific helpers to show info, success, warning, or error alerts with customizable content and duration.

Can I update notification content dynamically after it has been created?▼

Yes, you can dynamically update or replace existing notification content after creation. The notification API supports updating active toast messages, allowing real-time content changes for operation feedback or in-app alerts without destroying and recreating them.

How do I control toast placement and prevent screen clutter in Naive UI?▼

Control toast placement by configuring props to position notifications in various screen corners or panels. To prevent clutter, configure auto-dismiss duration and set a maximum limit for visible notifications to automatically manage and close surplus alerts.

What is the best way to manage multiple global alerts across different application layouts?▼

A centralized provider-driven notification system is the best way to manage global alerts. It exposes create, update, destroy, and destroyAll actions, ensuring consistent UX and unobtrusive feedback across various layouts and placements.

Does the Naive UI notification provider support custom auto-close durations?▼

Yes, the notification provider supports custom auto-close durations. You can configure the duration prop to automatically dismiss toast messages after a specified time, alongside controls for notification type, visibility, and placement.