# Flow

```ts
import { Flow, Text } from "@pibbl/core";
```

`Flow` uses [`FlowProps`](/reference/types/layout/#flowprops) and [`FlowStyle`](/reference/types/layout/#flowstyle) to place recursive direct children in
source order. Children retain their own local drawing geometry; the parent
resolves only placement. Declare finite boxes when a child needs allocated
space.

```tsx
<Flow style={{ width: 220, height: 180, direction: "vertical", gap: 8 }}>
  <Text style={{ fill: "#0f172a", font: "16px sans-serif" }}>First</Text>
  <Text style={{ fill: "#0f172a", font: "16px sans-serif" }}>Second</Text>
</Flow>
```

See the [Flow live example](/playground/#/examples/layout/flow).

## API details from source

<span id="api-Flow"></span>

Describes sequential flow layout for JSX or createElement authoring.

```ts
Flow: PibblPrimitiveComponent<FlowProps, PrimitiveInput<FlowProps, FlowStyle>>
```

Related API: [Flow](/reference/components/flow/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [FlowProps](/reference/types/layout/#flowprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [FlowStyle](/reference/types/layout/#flowstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[FlowProps](/reference/types/layout/#flowprops)

[FlowStyle](/reference/types/layout/#flowstyle)

[View source — packages/core/src/lib/layout/flow.ts:165](/source/packages/core/src/lib/layout/flow-ts/#L165)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Flow and flex layout](/minimal-examples/layout/flow-flex/): Stack a banner with a flexible row of marks. [Plain source](/minimal/layout/flow-flex.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.