Flex

Stack with direction=row baked in. Sugar for the most common layout.

Flex is Stack with direction="row" baked in. Every other prop matches.

Try it live

import { Flex, Box, Text, Button } from "@plyxui/primitives";

export default function App() {
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Flex align="center" justify="between" gap={3}
          style={{ background: "rgba(0,0,0,0.04)", padding: 12, borderRadius: 8 }}>
      <Text size="md" weight="semibold">Header</Text>
      <Flex align="center" gap={2}>
        <Button variant="ghost" size="sm">Cancel</Button>
        <Button variant="primary" size="sm">Save</Button>
      </Flex>
    </Flex>
  </Box>
);
}

<Flex gap={3} align="center">
  <Icon name="bell" />
  <Text>Notifications</Text>
  <Badge>3</Badge>
</Flex>

<Flex gap={2} justify="between" align="center">
  <Title />
  <Actions />
</Flex>

<Flex reverse>...</Flex>   {/* row-reverse */}

Props

Same as Stack except:

Why the separate component

<Stack direction="row"> reads worse than <Flex> when you reach for horizontal layout, which I do all the time. Single-purpose wrapper. Trivial under the hood.