Stack

Description

Another abstraction of flex components that forces simplifies building flex-based layouts. This is supposed to integrate a component that's close to how Figma's auto layout works.

Demo

import { Stack } from "@neui/layout";

Live Editor

<Stack gap={20} flexDirection={{ base: "column", md: "row" }}> <DemoBox /> <DemoBox /> <DemoBox /> </Stack>

<Stack gap={20} flexDirection={{ base: "column", md: "row" }}>
  <DemoBox />
  <DemoBox />
  <DemoBox />
</Stack>

Result

Loading...

import { HStack } from "@neui/layout";

Live Editor

<HStack gap={20} css={{ borderRadius: 10 }}> <DemoBox /> <DemoBox /> <DemoBox /> </HStack>

<HStack gap={20} css={{ borderRadius: 10 }}>
  <DemoBox />
  <DemoBox />
  <DemoBox />
</HStack>

Result

Loading...

import { VStack } from "@neui/layout";

Live Editor

<VStack gap={20} css={{ borderRadius: 10 }}> <DemoBox /> <DemoBox /> <DemoBox /> </VStack>

<VStack gap={20} css={{ borderRadius: 10 }}>
  <DemoBox />
  <DemoBox />
  <DemoBox />
</VStack>

Result

Loading...

Props

CSS Prop	Extends	RenderAs Prop	Renders by default
	Flex		Flex

Name	CSS Rule(s)	Description
spacing	gap	Sets the spacing between items