Stack
A flexible layout component for arranging elements in rows or columns with consistent spacing.
Import
import { Stack, VStack, HStack } from "@sparrowengg/twigs-react";Usage
const StackExample = () => {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
<Text css={{ fontSize: "$md", fontWeight: "$6" }}>Basic VStack</Text>
<VStack gap="$3" alignX="left">
<Button size="sm" leftIcon={<HomeIcon />}>Home</Button>
<Button size="sm" leftIcon={<UserIcon />}>Profile</Button>
<Button size="sm" leftIcon={<SettingsIcon />}>Settings</Button>
</VStack>
</Box>
);
};Props
Stack
| Prop | Type | Default |
|---|---|---|
direction? | 'row' | 'column' | 'row-reverse' | 'column-reverse' | Record<MediaKeys, Directions> | 'column' |
gap? | string | '$4' |
alignX? | 'left' | 'center' | 'right' | 'center' |
alignY? | 'left' | 'center' | 'right' | 'center' |
wrap? | 'wrap' | 'nowrap' | 'wrap-reverse' | - |
divider? | ReactElement | - |
children? | ReactNode | - |
css? | object | - |