n-descriptions

Name: n-descriptions
Availability: InStock
Author: jiaiyan

Display structured key-value data in a compact, readable layout.

8|3|Updated Mar 13, 2026

Search Tags:#layout #vue #read-only #ui-components #key-value #descriptions #naive-ui

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Descriptions component provides a clean and adaptable way to present key-value data in Naive UI, reducing markup boilerplate for detail panels and read-only views.

Core Features & Use Cases

Flexible Layout: control the number of columns and how labels align and wrap.
Bordered Mode: render borders around data blocks for a dense, card-like appearance.
Column Span: allow items to span multiple columns to emphasize important fields.
Size Options: choose small, medium, or large descriptions to match your UI rhythm.
Custom Styling: independently style labels and content for visual distinction.
Header Support: optionally add a header slot for titles or actions.

Quick Start

Create an n-descriptions instance and populate it with n-descriptions-item entries to display your data in a structured key-value layout.

Frequently Asked Questions about n-descriptions

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

FAQPage Schema

How do I display key-value data in a Vue read-only dashboard?▼

To display key-value data in a Vue read-only dashboard, use a descriptions component to render structured entries in a compact layout, reducing markup boilerplate for detail panels. You populate it with item entries for clear presentation.

Can I customize the column layout for a Naive UI detail panel?▼

Yes, you can customize the column layout for a Naive UI detail panel by adjusting the column count and label alignment. You can also enable bordered mode for a dense, card-like appearance and allow specific items to span multiple columns.

What is the best way to structure labeled user profile data in Naive UI?▼

The best way to structure labeled user profile data in Naive UI is using a descriptions component, which supports flexible column counts, sizing options, and independent styling for labels and content to ensure visual distinction.

Does the Naive UI descriptions component support a header slot for titles?▼

Yes, the Naive UI descriptions component supports an optional header slot. This allows you to add titles or action elements directly into the layout for configuration panels and read-only views.

How do I change the sizing of key-value blocks in a Vue configuration panel?▼

You change the sizing of key-value blocks in a Vue configuration panel by selecting small, medium, or large size options. This matches your UI rhythm while maintaining a clean and adaptable presentation of labeled data.