Skip to main content

VStack

VStack aligns items vertically.

Vector icon

Usage


import { Box, ContentSafeAreaView, HStack, VStack } from "@/components";
import theme from "@/theme";
import React, { ReactElement } from "react";

const Example = (): ReactElement => {
return (

<VStack g={5}>
<Box width={300} height={50} bg="primary200" />
<Box width={300} height={50} bg="primary300" />
<Box width={300} height={50} bg="primary400" />
</VStack>
); };

export default Example;

Props

Extends SpacingShorthandProps<Theme> & LayoutProps<Theme> from the theme

children

Type: React.ReactNode

reverse

Type: boolean

If reverse true, direction should be 'column-reverse' else column