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

n-space

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
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-space
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-button

Apply Canopy Button best-practices guidance to Angular lg-button usage.

Official
Intermediate
jiaiyanjiaiyan
8

naive-ui-design-layout

Design responsive Naive UI layouts using Grid, Flex, Space, and Layout components.

Community
Intermediate
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic