NxtGenNxtGenDesign v0/Components
Layout

Divider

콘텐츠 구분선.

가로·세로 1px 구분선입니다. 기본 색은 stroke.neutralWeak — 구분선은 대개 눈에 띄면 안 되기 때문입니다.

섹션을 나눌 때 Divider부터 꺼내지 마세요. 여백(VStack gap="section")만으로 관계가 충분히 읽히면 선은 없는 게 낫습니다. 선이 늘어날수록 화면은 칸으로 잘린 인상이 되고, 정작 강조해야 할 경계가 묻힙니다. 여백만으로 모호할 때만 씁니다.

import { Divider } from "@nxtgen-org/react";

Orientation

가로

위 콘텐츠
아래 콘텐츠
tsx
<VStack gap="x3">
  <span>위 콘텐츠</span>
  <Divider />
  <span>아래 콘텐츠</span>
</VStack>

세로

HStack 안에서 stretch로 늘어난다. 메타 정보를 구분할 때.

2026. 7. 25.
읽기 4분
Design
tsx
<HStack gap="x3">
  <span>2026. 7. 25.</span>
  <Divider orientation="vertical" />
  <span>읽기 4분</span>
</HStack>

Spacing

구분선 앞뒤 여백을 토큰으로 준다.

spacing prop

위 콘텐츠
아래 콘텐츠
tsx
<span>위 콘텐츠</span>
<Divider spacing="component" />
<span>아래 콘텐츠</span>

Props

NameTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"세로는 부모 flex 안에서 stretch로 늘어난다.
colorStrokeToken"neutralWeak"더 또렷한 경계가 필요하면 neutral.
spacingSpace—구분선 앞뒤 여백. 방향에 맞는 축으로 적용된다.