n-space

Name: n-space
Availability: InStock
Author: jiaiyan

Add consistent spacing between UI elements with configurable layouts and alignment.

8|3|Updated Mar 13, 2026

Search Tags:#layout #spacing #ui-components #gap #naive-ui #n-space

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Space component provides a reliable way to insert consistent gaps between UI elements, reducing manual spacing tweaks and layout inconsistencies.

Core Features & Use Cases

Flexible spacing control with small, medium, large, or custom sizes
Direction control for horizontal or vertical layouts
Wrap support and inline mode for responsive behavior
Justify and align options for precise alignment
Reverse order to support RTL layouts or sequencing
Optional item wrapping around children for per-item styling
Common use cases include button groups, toolbars, forms, and responsive content grids

Quick Start

Wrap your elements with n-space to create consistent gaps between them.

Frequently Asked Questions about n-space

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

FAQPage Schema

How do I add consistent spacing between UI elements in a layout?▼

To add consistent spacing between UI elements, wrap them in an n-space component. It automatically applies defined gaps to items like button groups and forms, reducing manual spacing tweaks and layout inconsistencies.

Can I use n-space to create both horizontal and vertical responsive layouts?▼

Yes, n-space supports both horizontal and vertical layouts for responsive behavior. You can control direction, enable wrapping, and use inline mode to ensure your UI components adapt correctly across different screen sizes.

How do I align and justify items within a toolbar or button group?▼

You align and justify items within a toolbar by using the align and justify props on n-space. These options provide precise alignment control for horizontal and vertical arrangements of your UI components.

Does n-space support RTL layouts and custom spacing sizes?▼

Yes, n-space supports RTL layouts using the reverse prop to sequence items in reverse order. It also offers flexible spacing control with small, medium, large, or custom size values for defined gaps.

What is the best way to apply per-item styling to wrapped elements in a grid?▼

The best way to apply per-item styling in a responsive content grid is using the wrap-item prop on n-space. This enables optional item wrapping around children, allowing individual styling for each element inside the layout.

When should I not use a dedicated spacing component for layout gaps?▼

You should avoid a dedicated spacing component if your layout requires complex nested CSS grid structures rather than simple defined gaps. n-space is optimized for consistent spacing in toolbars, forms, and button groups, not intricate grid designs.