Flex
Un-opinionated flex container with typed alignment, responsive gap and direction, and polymorphic element support.
<Flex align="center" justify="between" gap={4} className="w-full p-4 rounded border"> <DecorativeBox className="size-10" /> <DecorativeBox className="size-10" /> <DecorativeBox className="size-10" /></Flex>Usage
import { Flex } from "@reva/ui";Flex is the base layout primitive with no opinionated defaults. For one-directional stacking with default gap and alignment, use Stack.
Examples
Direction
Use the direction prop to set the flex direction.
<Flex direction="column" gap={2} className="w-full max-w-xs"> <DecorativeBox className="h-10" /> <DecorativeBox className="h-10" /> <DecorativeBox className="h-10" /></Flex>Responsive Direction
Pass an object to change direction at different breakpoints.
<Flex direction={{ default: "column", md: "row" }} gap={4} className="w-full"> <DecorativeBox className="h-20 flex-1" /> <DecorativeBox className="h-20 flex-1" /> <DecorativeBox className="h-20 flex-1" /></Flex>Responsive gap
Pass an object to change the spacing step at breakpoints (default, sm, md, lg, xl, 2xl, 3xl), same pattern as direction.
<Flex direction="row" gap={{ default: 2, md: 4, xl: 6 }} className="w-full flex-wrap"> <DecorativeBox className="h-16 w-20 shrink-0" /> <DecorativeBox className="h-16 w-20 shrink-0" /> <DecorativeBox className="h-16 w-20 shrink-0" /></Flex>Alignment
<Flex align="center" justify="center" gap={2} className="h-32 w-full rounded border"> <DecorativeBox className="size-8" /> <DecorativeBox className="size-12" /> <DecorativeBox className="size-8" /></Flex>Wrap
<Flex wrap gap={2} className="w-full max-w-xs"> <DecorativeBox className="h-10 w-24" /> <DecorativeBox className="h-10 w-24" /> <DecorativeBox className="h-10 w-24" /> <DecorativeBox className="h-10 w-24" /> <DecorativeBox className="h-10 w-24" /></Flex>Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "row" | "column" | "row-reverse" | "column-reverse" or responsive object | "row" | Flex direction. Responsive: { default: "column", md: "row" }. |
align | "start" | "end" | "center" | "stretch" | "baseline" | — | Cross-axis alignment (items-*). |
justify | "start" | "end" | "center" | "between" | "around" | "evenly" | — | Main-axis alignment (justify-*). |
gap | Spacing step (0–96 per the supported map) or responsive object | — | Gap between children (gap-*). Responsive: { default: 4, md: 6, xl: 8 }. No default. |
wrap | boolean | "wrap" | "nowrap" | "wrap-reverse" | — | Flex wrap. |
inline | boolean | false | Use inline-flex instead of flex. |
as | HTML element | "div" | Rendered element. |
asChild | boolean | false | Merge props onto the child element. |
className | string | — | Additional Tailwind / utility classes. |