StackAndroid

VStack/HStack layout with gap scale.

$ npx lumioui add stack

import { VStack, HStack, Spacer, Box } from "@/components/ui/stack/stack";

Parts: VStack · HStack · Spacer · Box

Props4

gap?	number	Gap between children in px (applied via style for reliability).
align?	Align	Cross-axis alignment.
justify?	Justify	Main-axis distribution.
className?	string

Stack — Boxbox.tsx

stack/variants/box.tsx open

VStack/HStack layout with gap scale.

import { StackBox } from "@/components/ui/stack/variants/box";

export function Example() {
  return (
    <StackBox />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Box } from "../stack";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** StackBox — freeform box surfaces staged as a delivered-stop receipt. */
export function StackBox() {
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center justify-between">
            <Text variant="small" className="font-semibold">Stop #1042 · Sakura Ramen</Text>
            <Box className="self-start rounded-full bg-success/15 px-3 py-1">
              <Text variant="small">Delivered · 12:40</Text>
            </Box>
          </View>
          <Text variant="muted">Rua Augusta 24 · signed by Ana</Text>

          <View className="flex-row gap-2">
            <Glass interactive curvature="edge" className="flex-1 rounded-xl">
              <Box className="items-center gap-1 py-3">
                <Icon name="camera" size="sm" color="mutedForeground" />
                <Text variant="muted" className="text-xs">Proof</Text>
              </Box>
            </Glass>
            <Glass interactive curvature="edge" className="flex-1 rounded-xl">
              <Box className="items-center gap-1 py-3">
                <Icon name="share" size="sm" color="mutedForeground" />
                <Text variant="muted" className="text-xs">Share</Text>
              </Box>
            </Glass>
            <Glass interactive curvature="edge" className="flex-1 rounded-xl">
              <Box className="items-center gap-1 py-3">
                <Icon name="map-pin" size="sm" color="mutedForeground" />
                <Text variant="muted" className="text-xs">Revisit</Text>
              </Box>
            </Glass>
          </View>
        </Glass>
      </View>
  );
}

Stack — Hstackhstack.tsx

stack/variants/hstack.tsx open

VStack/HStack layout with gap scale.

import { StackHStack } from "@/components/ui/stack/variants/hstack";

export function Example() {
  return (
    <StackHStack />
  );
}

import * as React from "react";
import { View } from "react-native";
import { HStack, Spacer } from "../stack";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** StackHStack — horizontal row with Spacer pushing the total right. */
export function StackHStack() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">HStack + Spacer — receipt total</Text>
        <Glass interactive curvature="edge" className="w-full rounded-xl">
          <HStack className="gap-2 p-3">
            <Text variant="muted">Total</Text>
            <Spacer />
            <Text variant="small">$24.50</Text>
          </HStack>
        </Glass>
      </View>
  );
}

Stack — Vstackvstack.tsx

stack/variants/vstack.tsx open

VStack/HStack layout with gap scale.

import { StackVStack } from "@/components/ui/stack/variants/vstack";

export function Example() {
  return (
    <StackVStack />
  );
}

import * as React from "react";
import { View } from "react-native";
import { VStack } from "../stack";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** StackVStack — vertical order card stack. */
export function StackVStack() {
  return (
    <View className="w-full gap-3">
        <Text variant="small" className="text-white drop-shadow">VStack — order card</Text>
        <Glass interactive curvature="edge" className="w-full rounded-xl">
          <VStack className="gap-1 p-3">
            <Text variant="small">Sakura Ramen · Order #8421</Text>
            <Text variant="muted">Tonkotsu Ramen × 2 · 2m ago</Text>
            <Text variant="muted">Delivered to Amara Chen, Sep 12</Text>
          </VStack>
        </Glass>
      </View>
  );
}