n-popselect

Provides a lightweight, popover-based option selector for Naive UI compact interfaces.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-popselect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-popselect
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-popselect
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-popselect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Popselect provides a lightweight, popover-based option picker to replace heavier select controls in compact UIs.

Core Features & Use Cases

  • Single/Multiple selection
  • Size variants (small, medium, large)
  • Scrollable and virtual-scroll options for long lists
  • Customizable slots (header, action, empty)
  • Seamless popover integration with trigger controls for responsive layouts

Quick Start

Open the popselect, click the trigger button, and choose an option to update the selection.

Frequently Asked Questions about n-popselect

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

FAQPage Schema
How do I implement a popover-based option selector in a Vue dashboard?

A popover-based option selector uses a lightweight popover trigger to pick options, replacing heavier dropdown controls in compact Vue UIs. It integrates with popover behavior to provide responsive layouts for dashboards and toolbars.

Does Naive UI have a lightweight alternative to standard select components for compact forms?

Yes, a lightweight popselect component for Naive UI replaces heavier select controls in compact forms. It provides size variants and seamless popover integration to maintain a responsive layout in tight spaces.

Can I handle multiple selections and long lists in a Vue popover dropdown?

Yes, the Vue popover dropdown supports multiple selections and handles long lists using scrollable and virtual-scroll options. This ensures performance remains stable when rendering extensive option arrays.

How do I customize the header and empty state of a popselect component?

You customize the popselect component using built-in slots for the header, action, and empty states. This allows you to inject custom Vue templates directly into the popover for tailored filtering UI.

What is the best way to add quick filtering controls to a compact UI toolbar?

The best way to add quick filtering to a compact toolbar is using a popover-based option picker. It acts as a lightweight trigger control that opens a selection menu, saving space while enabling fast option picks.