# HStack
URL: /react/components/layout/h-stack
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(foundation)/layout/h-stack.mdx

가로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

## Preview

```tsx
import { Box, HStack } from "@seed-design/react";

export default function HStackPreview() {
  return (
    <HStack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
      <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        1
      </Box>
      <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        2
      </Box>
      <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        3
      </Box>
    </HStack>
  );
}
```

## Usage

```tsx
import { HStack } from "@seed-design/react";
```

```tsx
<HStack />
```

## Props

## Responsive Design

<Card title="Responsive Design" href="/react/components/concepts/responsive-design">
  HStack의 레이아웃 프로퍼티에 반응형 값을 전달하여 viewport 크기에 따라 스타일을 조정할 수 있습니다.
</Card>