Container

Container, Row, and Col occupy all available space and slice and dice it. Container constrains content to a max width and centers it; Row lays children out horizontally; Col stacks them vertically.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl tristique nunc.

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

export default function ReactContainerDefault() {
  return (
    <Container>
      <Item className="w-full bg-muted">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui
        nisl tristique nunc.
      </Item>
    </Container>
  );
}

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

<Container>
  <Item class="w-full bg-muted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur, tortor in lacinia eleifend, dui nisl
    tristique nunc.
  </Item>
</Container>

Examples

Col

One

Two

Three

One

Two

Three

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

export default function ReactColDefault() {
  return (
    <Col>
      <Item className="bg-muted">One</Item>
      <Item className="bg-muted/50">Two</Item>
      <Item className="bg-muted">Three</Item>
    </Col>
  );
}

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

<Col>
  <Item class="bg-muted">One</Item>
  <Item class="bg-muted/50">Two</Item>
  <Item class="bg-muted">Three</Item>
</Col>

Col Gap

One

Two

Three

One

Two

Three

// apps/docs/src/components/examples/col/with-gap/react.tsx
import { Item, Col } from '@cloudvoyant/helical-react';

export default function ReactColWithGap() {
  return (
    <Col className="gap-4">
      <Item className="bg-muted">One</Item>
      <Item className="bg-muted/50">Two</Item>
      <Item className="bg-muted">Three</Item>
    </Col>
  );
}

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

<Col class="gap-4">
  <Item class="bg-muted">One</Item>
  <Item class="bg-muted/50">Two</Item>
  <Item class="bg-muted">Three</Item>
</Col>

Col Responsive

One

Two

Three

One

Two

Three

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

export default function ReactColResponsiveDirection() {
  return (
    <Col className="md:flex-row">
      <Item className="bg-muted">One</Item>
      <Item className="bg-muted/50">Two</Item>
      <Item className="bg-muted">Three</Item>
    </Col>
  );
}

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

<Col class="md:flex-row">
  <Item class="bg-muted">One</Item>
  <Item class="bg-muted/50">Two</Item>
  <Item class="bg-muted">Three</Item>
</Col>

Col Separator

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

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

export default function ReactColSeparator() {
  return (
    <Col 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>
    </Col>
  );
}

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

<Col 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>
</Col>

Container Fluid

This container stretches to fill the width of its parent.

// apps/docs/src/components/examples/container/fluid/react.tsx
import { Container, Item } from '@cloudvoyant/helical-react';

export default function ReactContainerFluid() {
  return (
    <Container className="max-w-full">
      <Item className="w-full bg-muted">This container stretches to fill the width of its parent.</Item>
    </Container>
  );
}

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

<Container class="max-w-full">
  <Item class="w-full bg-muted">
    This container stretches to fill the width of its parent.
  </Item>
</Container>

Container Sizes

max-w-sm

max-w-2xl

max-w-5xl

max-w-sm

max-w-2xl

max-w-5xl

// apps/docs/src/components/examples/container/sizes/react.tsx
import { Container, Item } from '@cloudvoyant/helical-react';

export default function ReactContainerSizes() {
  return (
    <div className="flex flex-col gap-4">
      <Container className="max-w-sm">
        <Item className="w-full bg-muted">max-w-sm</Item>
      </Container>
      <Container className="max-w-2xl">
        <Item className="w-full bg-muted">max-w-2xl</Item>
      </Container>
      <Container className="max-w-5xl">
        <Item className="w-full bg-muted">max-w-5xl</Item>
      </Container>
    </div>
  );
}

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

<div class="flex flex-col gap-4">
  <Container class="max-w-sm">
    <Item class="w-full bg-muted">max-w-sm</Item>
  </Container>
  <Container class="max-w-2xl">
    <Item class="w-full bg-muted">max-w-2xl</Item>
  </Container>
  <Container class="max-w-5xl">
    <Item class="w-full bg-muted">max-w-5xl</Item>
  </Container>
</div>

Portal

This text renders in place. This badge renders at document.body via Portal

This text renders in place.

// apps/docs/src/components/examples/layout/portal/react.tsx
import { Portal } from '@cloudvoyant/helical-react';

export default function ReactLayoutPortal() {
  return (
    <p className="text-sm text-muted-foreground">
      This text renders in place.{' '}
      <Portal>
        <span className="rounded bg-accent px-1.5 py-0.5 text-xs font-medium text-accent-foreground">
          This badge renders at document.body via Portal
        </span>
      </Portal>
    </p>
  );
}

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

<p class="text-sm text-muted-foreground">
  This text renders in place.
  <Portal>
    <span class="rounded bg-accent px-1.5 py-0.5 text-xs font-medium text-accent-foreground">
      This badge renders at document.body via Portal
    </span>
  </Portal>
</p>

Row

One

Two

Three

One

Two

Three

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

export default function ReactRowDefault() {
  return (
    <Row>
      <Item className="bg-muted">One</Item>
      <Item className="bg-muted/50">Two</Item>
      <Item className="bg-muted">Three</Item>
    </Row>
  );
}

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

<Row>
  <Item class="bg-muted">One</Item>
  <Item class="bg-muted/50">Two</Item>
  <Item class="bg-muted">Three</Item>
</Row>

Row Gap

One

Two

Three

One

Two

Three

// apps/docs/src/components/examples/row/with-gap/react.tsx
import { Item, Row } from '@cloudvoyant/helical-react';

export default function ReactRowWithGap() {
  return (
    <Row className="gap-4">
      <Item className="bg-muted">One</Item>
      <Item className="bg-muted/50">Two</Item>
      <Item className="bg-muted">Three</Item>
    </Row>
  );
}

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

<Row class="gap-4">
  <Item class="bg-muted">One</Item>
  <Item class="bg-muted/50">Two</Item>
  <Item class="bg-muted">Three</Item>
</Row>

Row Responsive

One

Two

Three

One

Two

Three

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

export default function ReactRowResponsiveDirection() {
  return (
    <Row className="md:flex-col">
      <Item className="bg-muted">One</Item>
      <Item className="bg-muted/50">Two</Item>
      <Item className="bg-muted">Three</Item>
    </Row>
  );
}

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

<Row class="md:flex-col">
  <Item class="bg-muted">One</Item>
  <Item class="bg-muted/50">Two</Item>
  <Item class="bg-muted">Three</Item>
</Row>

Row Separator

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

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

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

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

<Row class="gap-0 divide-x divide-border">
  <div class="px-3 py-2 text-sm">Item 1</div>
  <div class="px-3 py-2 text-sm">Item 2</div>
  <div class="px-3 py-2 text-sm">Item 3</div>
</Row>

API Reference

The React and Svelte components expose no manual sizing props — customize width, padding, gap, and direction with className/class, which is merged last via cn so Tailwind classes override the defaults.

Container

Props

Prop	Type	Default	Description
`className` / `class`	`string`	—	Merged via `cn` with `containerBase` (`mx-auto w-full max-w-[90rem] px-4 md:px-6 lg:px-8`).

Row

Props

Prop	Type	Default	Description
`className` / `class`	`string`	—	Merged via `cn` with `rowBase` (`flex flex-row`). Use `gap-*`, `divide-x`, or `flex-col` to customize.

Col

Props

Prop	Type	Default	Description
`className` / `class`	`string`	—	Merged via `cn` with `colBase` (`flex flex-col`). Use `gap-*`, `divide-y`, or `flex-row` to customize.

Portal

Portal renders its children into document.body, escaping any ancestor that clips, hides, or scrolls them. It is transparent — no base class, no styling. The overlay components (Popover, Dialog, Window, Tooltip) use it internally to mount their content; reach for it directly when your own composition needs to escape an ancestor (e.g. a dropdown inside an overflow-hidden card).

Props

Prop	Type	Default	Description
`className` / `class`	`string`	—	Optional class applied to the portalled container (rarely needed).
`disabled`	`boolean`	`false`	When `true`, children render in place instead of being portalled.

Accessibility

Container, Row, and Col render a native <div>, so they require no roles or keyboard handling. Portal is also a plain container — it only moves children to document.body and does not alter their semantics.