HStack

HStack is a convenience wrapper around Stack with a fixed horizontal (row) direction. Use it for horizontal layouts.

Import

import { HStack } from "@tosui/react";

Basic Usage

Code

<HStack gap={4}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
</HStack>

Preview

Item 1

Item 2

Item 3

Alignment

Code

<HStack gap={4} align="center" justify="space-between" p={4} bg="surface" border="thin" borderColor="border">
  <Box p={2} bg="primary-subtle">Left</Box>
  <Box p={4} bg="accent-subtle">Center</Box>
  <Box p={2} bg="success-subtle">Right</Box>
</HStack>

Preview

Left

Center

Right

Wrapping

Code

<HStack gap={4} wrap>
  <Box p={4} bg="primary-subtle" minW="120px">Item 1</Box>
  <Box p={4} bg="accent-subtle" minW="120px">Item 2</Box>
  <Box p={4} bg="success-subtle" minW="120px">Item 3</Box>
  <Box p={4} bg="warning-subtle" minW="120px">Item 4</Box>
</HStack>

Preview

Item 1

Item 2

Item 3

Item 4

Common Patterns

Navigation Bar

<HStack as="nav" gap={6} align="center" justify="space-between" p={4}>
  <Box fontWeight="bold">Logo</Box>
  <HStack gap={4}>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </HStack>
</HStack>

Button Group

<HStack gap={2}>
  <Button variant="solid">Save</Button>
  <Button variant="outline">Cancel</Button>
</HStack>

Props Reference

All convenience props (align, justify, wrap) accept responsive objects in addition to simple values.

Prop	Type	Default	Description
gap	ResponsiveValue<0-32>	-	Gap between children (spacing multiplier)
align	ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">	-	Cross-axis alignment
justify	ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">	-	Main-axis alignment
wrap	ResponsiveValue<boolean>	false	Enable flex wrapping
as	ElementType	"div"	HTML element to render

HStack accepts all Stack props except direction.

TypeScript

import { HStack, type HStackProps, type HStackOwnProps } from "@tosui/react";