SEED Design
Layout

VStack

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

import { Box, VStack } from "@seed-design/react";

export default function VStackPreview() {
  return (
    <VStack 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>
    </VStack>
  );
}

Usage

import { VStack } from "@seed-design/react";
<VStack />

Props

Prop

Type

Last updated on

On this page