NxtGenNxtGenDesign v0/Components
Layout

Stack

Flex · HStack · VStack — 한 방향으로 나열하는 컨테이너.

Flex는 flex 컨테이너 전부를, HStack·VStack은 가장 흔한 두 방향을 기본값과 함께 제공합니다. 간격은 토큰으로만 받습니다.

기본값이 다릅니다 — HStack은 align="center" · gap="x2"(아이콘+텍스트 조합이 가장 흔해서), VStack은 gap="component"(컴포넌트를 쌓는 게 주 용도라서)입니다. 그래서 대부분은 prop 없이 그냥 쓰면 맞습니다.

import { Flex, HStack, VStack } from "@nxtgen-org/react";

HStack

가로 나열. 기본 gap=x2, align=center.

기본

1
2
3
tsx
<HStack>
  <Cell>1</Cell>
  <Cell>2</Cell>
  <Cell>3</Cell>
</HStack>

양끝 정렬

justify=between — 헤더에서 로고와 액션을 양쪽으로 밀 때.

Section title
tsx
<HStack justify="between">
  <span>Section title</span>
  <HStack gap="actions">
    <Button variant="ghost">취소</Button>
    <Button>저장</Button>
  </HStack>
</HStack>

칩 나열

gap=chips — 뱃지·태그가 나란히 놓일 때의 전용 토큰.

DesignTokensStableBeta
tsx
<HStack gap="chips" wrap>
  <Badge>Design</Badge>
  <Badge variant="brand">Tokens</Badge>
</HStack>

VStack

세로 쌓기. 기본 gap=component.

기본

1
2
3
tsx
<VStack>
  <Cell>1</Cell>
  <Cell>2</Cell>
  <Cell>3</Cell>
</VStack>

섹션 리듬

gap=section — 페이지 내 섹션 사이. 구분선보다 여백이 먼저다.

첫 섹션gap="text"로 묶인 텍스트 블록
두 번째 섹션사이는 gap="section"
tsx
<VStack gap="section">
  <VStack gap="text">
    <h2>첫 섹션</h2>
    <p>본문</p>
  </VStack>
  <VStack gap="text">
    <h2>두 번째 섹션</h2>
    <p>본문</p>
  </VStack>
</VStack>

Flex

방향·정렬을 직접 지정해야 할 때. HStack/VStack으로 표현되면 그쪽을 쓴다.

wrap + 축별 간격

A
B
C
D
E
F
tsx
<Flex wrap rowGap="x2" columnGap="x4">
  {items.map((v) => <Cell key={v}>{v}</Cell>)}
</Flex>

Props

Box의 모든 prop을 그대로 받습니다. 아래는 Flex 계열이 추가로 갖는 것.

NameTypeDefaultDescription
direction"row" | "column" | "rowReverse" | "columnReverse""row"HStack·VStack에서는 고정되어 노출되지 않는다.
gapSpacex2 (HStack) / component (VStack)관계 토큰을 먼저 고른다.
rowGap / columnGapSpace—축별로 다르게 줄 때. gap보다 우선한다.
align"start" | "center" | "end" | "stretch" | "baseline"center (HStack만)교차축 정렬.
justify"start" | "center" | "end" | "between" | "around" | "evenly"—주축 정렬.
wrapbooleanfalse줄바꿈 허용.
inlinebooleanfalseinline-flex로 렌더링.