n-card

Name: n-card
Availability: InStock
Author: jiaiyan

Create configurable Naive UI card components with slots and props.

8|3|Updated Mar 13, 2026

Search Tags:#vue3 #design-system #slots #card #ui-component #naive-ui

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Card-based layouts often require repetitive boilerplate to achieve consistent visuals and behavior. The n-card skill provides a reusable, slot-driven Card component to standardize content containers across UIs built with Naive UI.

Core Features & Use Cases

Slot System: cover, header, header-extra, default, footer, and action slots for flexible composition.
Styling & Layout: bordered or borderless, hoverable shadows, embedded styling, and content-scrollable regions.
Sizes & API: supports multiple sizes (small to huge) and a rich props/slots API for customization.
Use Cases: dashboards, panels, forms, image cards, and modal content wrappers.

Quick Start

Create a simple n-card with a header, content, and footer to display a user profile.

Frequently Asked Questions about n-card

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

FAQPage Schema

How do I build consistent card-based layouts in Vue3 without repetitive boilerplate?▼

To build consistent card-based layouts in Vue3, use a slot-driven component to standardize content containers across Naive UI interfaces, eliminating repetitive boilerplate. It provides configurable headers, covers, and footers for dashboards and panels.

What slots are available for composing content containers in a Vue3 design system?▼

Available slots for composing content containers include cover, header, header-extra, default, footer, and action slots. These slots enable flexible composition and customization for dashboards, data panels, forms, and image cards within your Vue3 design system.

Can I configure card sizes and borders for data panels using Naive UI?▼

Yes, you can configure card sizes and borders for data panels using Naive UI. The component supports multiple sizes from small to huge, along with bordered, borderless, hoverable shadows, and embedded styling options for various panel requirements.

How do I create scrollable content regions within a Vue3 card component?▼

To create scrollable content regions within a Vue3 card component, utilize the content-scrollable configuration. This feature allows you to build data panels and forms with fixed headers while the main content area scrolls independently.

Does the n-card skill support segmented layouts for dashboards?▼

Yes, the n-card skill supports segmented layouts for dashboards. It provides a rich API for props and slots, enabling various card configurations including segmented sections, embedded styling, and hoverable shadows specifically for dashboard and panel use cases.