Flex

Flex

<Flex direction="row" align="center" justify="between" gap={4}>
  <Logo />
  <Nav />
</Flex>

Install: @helixui/core

import { Flex } from '@helixui/core'

status: stable · since: 0.1.0

Tags: primitive, flexbox, row, column, gap

Anatomy

[ child ][ child ][ child ]   ← horizontal
  child
  child
  child                          ← vertical (direction="column")

Layout

• display — flex
• width — auto
• height — auto
• intrinsicSize — flex container; sized by flow + children
• stackable — true
• fullBleed — false

Visual

A flex container with direction, align, justify, gap, and wrap exposed as props that map to design tokens.

Props

Name	Type	Default	Description
direction	'row' | 'row-reverse' | 'column' | 'column-reverse'	row	Flex direction.
align	'start' | 'center' | 'end' | 'stretch' | 'baseline'	stretch	Cross-axis alignment.
justify	'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'	start	Main-axis alignment.
gap	number | string	—	Gap between children. Numeric → space.N token.
wrap	boolean	false	Allow wrapping.
inline	boolean	false	Use inline-flex instead of flex.

Tokens used

space.1, space.2, space.3, space.4, space.5, space.6, space.8

Accessibility

Notes

• Flex is presentational. Use Stack for vertically/horizontally arranged content lists.

Composes with

Component	Relation	Note
Stack	alternative	Stack is opinionated for vertical/horizontal stacking.
Grid	alternative	Use Grid for 2-D layout.
Box	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

horizontal row of items

“flex row with gap”

<Flex direction="row" gap={3} align="center">{children}</Flex>

Related

• Stack
• Grid
• Box