skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-steps

Render step progress indicators with status states and clickable navigation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Step-based progress UI helps users understand their position in a process and navigate sequential tasks without losing context.

Core Features & Use Cases

  • Multiple Sizes: Small and medium sizes to fit different layouts.
  • Vertical Layout: Support for vertical step display.
  • Status States: Process, finish, error, and wait states to convey progress.
  • Custom Icons: Allow per-step or global icons to indicate status.
  • Clickable Steps: Enable navigation by clicking steps when appropriate.
  • Content Placement: Control where step descriptions appear relative to titles.

Quick Start

Create an n-steps instance with several n-step items and control the current step to display progress.

Frequently Asked Questions about n-steps

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

FAQPage Schema
How do I build a multi-step wizard in Vue using naive-ui?▼

Build a multi-step wizard in Vue by configuring an n-steps instance with several n-step items, then bind the current step state and handle the on-update:current event to render sequential progress.

What is the best way to display vertical step progress for a checkout flow?▼

Display vertical step progress for a checkout flow by enabling the vertical layout prop on the n-steps component, which stacks step indicators and descriptions vertically to maintain context.

How do I manage form wizard status states like error and finish in Vue?▼

Manage form wizard status states like error and finish in Vue by setting the status prop on individual n-step items to process, finish, error, or wait to convey progress accurately.

Can I use clickable steps for navigation in a Vue onboarding flow?▼

Yes, you can enable clickable steps for navigation in a Vue onboarding flow by configuring the n-steps component to allow clicks when appropriate, triggering the on-update:current event.

Does naive-ui support custom icons for step indicators in a guided task?▼

Yes, naive-ui supports custom icons for step indicators in a guided task by allowing per-step or global icon configurations to visually indicate process, finish, and error states.

What sizes are available for step progress indicators in naive-ui?▼

Step progress indicators in naive-ui are available in small and medium sizes to fit different layout densities within your Vue application's forms or onboarding sequences.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-gradient-text

Render gradient text with configurable size and type in Vue 3.

Community
Intermediate
Bbeierle12Bbeierle12
8

form-ux-patterns

Define multi-step form systems with configurable steps and conditional fields.

Community
Intermediate
verivendverivend

form-validation

Implement Vue.js form validation with VeeValidate 4 and Zod schemas.

Official
Intermediate
jiaiyanjiaiyan
8

n-progress

Render line, circle, multiple-circle, and dashboard progress indicators in Naive UI applications.

Community
Intermediate