Stack

Stack, HStack, and VStack lay out visual lists of common items — grouped buttons, chips, list rows — with a small default gap. They’re for visual lists, not for slicing up layouts; use Row, Col, and Container for that.

One

Two

Three

One

Two

Three

// apps/docs/src/components/examples/stack/default/react.tsx
import { Item, Stack } from '@cloudvoyant/helical-react';

export default function ReactStackDefault() {
  return (
    <Stack>
      <Item variant="surface">One</Item>
      <Item variant="surface">Two</Item>
      <Item variant="surface">Three</Item>
    </Stack>
  );
}

<!-- apps/docs/src/components/examples/stack/default/svelte.svelte -->
<script lang="ts">
  import { Item, Stack } from '@cloudvoyant/helical-svelte';
</script>

<Stack>
  <Item variant="surface">One</Item>
  <Item variant="surface">Two</Item>
  <Item variant="surface">Three</Item>
</Stack>

Examples

Hstack

One

Two

Three

One

Two

Three

// apps/docs/src/components/examples/stack/hstack/react.tsx
import { Item, HStack } from '@cloudvoyant/helical-react';

export default function ReactStackHstack() {
  return (
    <HStack>
      <Item variant="surface">One</Item>
      <Item variant="surface">Two</Item>
      <Item variant="surface">Three</Item>
    </HStack>
  );
}

<!-- apps/docs/src/components/examples/stack/hstack/svelte.svelte -->
<script lang="ts">
  import { Item, HStack } from '@cloudvoyant/helical-svelte';
</script>

<HStack>
  <Item variant="surface">One</Item>
  <Item variant="surface">Two</Item>
  <Item variant="surface">Three</Item>
</HStack>

Responsive Direction

One

Two

Three

One

Two

Three

// apps/docs/src/components/examples/stack/responsive-direction/react.tsx
import { Item, Stack } from '@cloudvoyant/helical-react';

export default function ReactStackResponsiveDirection() {
  return (
    <Stack className="md:flex-row">
      <Item variant="surface">One</Item>
      <Item variant="surface">Two</Item>
      <Item variant="surface">Three</Item>
    </Stack>
  );
}

<!-- apps/docs/src/components/examples/stack/responsive-direction/svelte.svelte -->
<script lang="ts">
  import { Item, Stack } from '@cloudvoyant/helical-svelte';
</script>

<Stack class="md:flex-row">
  <Item variant="surface">One</Item>
  <Item variant="surface">Two</Item>
  <Item variant="surface">Three</Item>
</Stack>

Separator

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

// apps/docs/src/components/examples/stack/separator/react.tsx
import { Stack } from '@cloudvoyant/helical-react';

export default function ReactStackSeparator() {
  return (
    <Stack className="gap-0 divide-y divide-border">
      <div className="py-2 text-sm">Item 1</div>
      <div className="py-2 text-sm">Item 2</div>
      <div className="py-2 text-sm">Item 3</div>
    </Stack>
  );
}

<!-- apps/docs/src/components/examples/stack/separator/svelte.svelte -->
<script lang="ts">
  import { Stack } from '@cloudvoyant/helical-svelte';
</script>

<Stack class="gap-0 divide-y divide-border">
  <div class="py-2 text-sm">Item 1</div>
  <div class="py-2 text-sm">Item 2</div>
  <div class="py-2 text-sm">Item 3</div>
</Stack>

Vstack

One

Two

Three

One

Two

Three

// apps/docs/src/components/examples/stack/vstack/react.tsx
import { Item, VStack } from '@cloudvoyant/helical-react';

export default function ReactStackVstack() {
  return (
    <VStack>
      <Item variant="surface">One</Item>
      <Item variant="surface">Two</Item>
      <Item variant="surface">Three</Item>
    </VStack>
  );
}

<!-- apps/docs/src/components/examples/stack/vstack/svelte.svelte -->
<script lang="ts">
  import { Item, VStack } from '@cloudvoyant/helical-svelte';
</script>

<VStack>
  <Item variant="surface">One</Item>
  <Item variant="surface">Two</Item>
  <Item variant="surface">Three</Item>
</VStack>

API Reference

All three components accept the same props. The direction is set by the component (Stack/VStack are columns, HStack is a row); override it with a Tailwind class like flex-row/flex-col.

Stack / HStack / VStack

Props

Prop	Type	Default	Description
`className` / `class`	`string`	—	Merged via `cn` with the base classes (`flex flex-col gap-1`, `flex flex-row gap-1`). Tailwind `gap-`, `flex-row`/`flex-col`, and `divide-` utilities override the defaults.

Accessibility

Renders a native <div>; no roles or keyboard handling are required.