Flex

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Flex, FlexItem } from "@tessinaui/ui";

{/* Row layout */}
<Flex direction="row" gap="md" align="center">
  <Avatar src="/me.png" />
  <div className="flex flex-col">
    <p className="font-medium">Jane</p>
    <p className="text-muted-foreground">jane@example.com</p>
  </div>
</Flex>

{/* Column layout */}
<Flex direction="column" gap="sm">
  <h2>Title</h2>
  <p>Body</p>
  <button>Action</button>
</Flex>

{/* Wrapping with independent gaps */}
<Flex direction="row" wrap="wrap" columnGap="xl" rowGap="sm">
  {tags.map((t) => <Chip key={t}>{t}</Chip>)}
</Flex>

{/* Sidebar + main with FlexItem grow */}
<Flex direction="row" gap="md">
  <aside className="w-48">Sidebar</aside>
  <FlexItem grow>
    <main>Main content fills the remaining space</main>
  </FlexItem>
</Flex>

{/* Three columns with fractional basis */}
<Flex direction="row" gap="md">
  <FlexItem basis="1/4">Left</FlexItem>
  <FlexItem basis="2/4">Center</FlexItem>
  <FlexItem basis="1/4">Right</FlexItem>
</Flex>

{/* Reorder with order prop */}
<Flex direction="row" gap="sm">
  <FlexItem order="last">rendered last</FlexItem>
  <div>rendered first</div>
  <FlexItem order="first">rendered even earlier</FlexItem>
</Flex>

{/* Polymorphic */}
<Flex direction="row" gap="sm" render={<nav aria-label="Primary" />}>
  <a href="/">Home</a>
  <a href="/about">About</a>
</Flex>

{/* RTL */}
<Flex direction="row" dir="rtl" gap="sm">
  <span>أول</span>
  <span>ثاني</span>
</Flex>

Showcase

Direction

Unlike Stack, Flex exposes all four flex-direction values directly.

Wrap

Gap

Seven presets that map to Tailwind's spacing scale.

For independent axis control use rowGap and columnGap — they accept the same seven values and override gap on their respective axis.

<Flex wrap="wrap" columnGap="xl" rowGap="sm">…</Flex>

Align (align-items)

Cross-axis alignment of children.

Justify (justify-content)

Main-axis distribution.

Content (align-content)

Applies only when wrap is enabled and there are multiple rows on the cross axis.

Inline

inline={true} swaps flex for inline-flex so the container flows alongside surrounding text or other inline-level elements.

Polymorphic render

Preserve Flex styling while mounting semantic HTML.

<Flex direction="row" gap="md" render={<nav aria-label="Primary" />}>
  <a href="/">Home</a>
  <a href="/about">About</a>
</Flex>

<Flex render={<section />} direction="column" gap="lg">
  <h2>Settings</h2>
  <p>Adjust your preferences below.</p>
</Flex>

FlexItem

A helper for setting flex-child properties (flex-grow, flex-shrink, flex-basis, order, align-self) without reaching for Tailwind classes directly. FlexItem is optional — you can always apply grow, shrink-0, etc. inline on any child.

<Flex direction="row" gap="md">
  <aside className="w-48">Sidebar</aside>
  <FlexItem grow>
    <main>Main (grows to fill)</main>
  </FlexItem>
</Flex>

grow

shrink

basis

Presets cover fractional layouts without arbitrary values.

"auto" · "full" · "0" · "1/2" · "1/3" · "2/3" · "1/4" · "2/4" · "3/4" · "1/5" · "2/5" · "3/5" · "4/5" · "1/6" · "5/6" · "1/12" through "11/12"

order

alignSelf

"auto" · "start" · "center" · "end" · "stretch" · "baseline" → self-*

RTL

dir="rtl" is forwarded to the DOM node and flips the main axis of row directions. Column directions are unaffected by text direction.

Accessibility

• Flex is a structural primitive — it applies no ARIA roles.
• Use render to mount semantic HTML (<nav>, <ul>, <section>, <header>) when the grouping has meaning.
• Reordering children with order or row-reverse/column-reverse separates visual order from DOM order. Keep DOM order logical — screen readers and keyboard navigation follow source order, not visual order.
• inline does not remove any semantics — the element remains a <div> (or whatever render provides).

When to use Flex vs. Stack

Both are flex wrappers. Pick based on how much of the flex API you actually need.

For many apps Stack is the right pick. Reach for Flex when you're building a layout that can't be expressed through Stack's opinionated API.

API Reference

Flex Props

FlexItem Props

Notes

• No intrinsic padding. Flex only controls layout — add padding, borders, background via className.
• No SSR caveats. Flex is a pure wrapper with no hooks; safe to render server-side.
• content is a prop, not an HTML attribute. React's native content HTML attribute (meta-tag-only) is omitted from Flex's props so the CVA variant takes precedence.
• Arbitrary values. If a fraction you need isn't in the basis preset list, drop to className="basis-[...]" — FlexItem's class output is merged after its props.