Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Flex Component

A flexible layout component for arranging children with configurable gap, direction, justification, alignment, and wrapping.

Item 1

Item 2

Item 3

import { Box, Flex } from "@locus-ui/components";
<Flex gap="4" direction="row" align="center">  <Box px="2" py="1" className="border">Item 1</Box>  <Box px="2" py="1" className="border">Item 2</Box>  <Box px="2" py="1" className="border">Item 3</Box></Flex>

View Source

Anatomy

Import the component:

Anatomy

import { Box, Flex } from "@locus-ui/components";
<Flex />

Examples

Gaps

The gap prop controls the spacing between child elements using predefined scale values 0 through 8.

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

gaps.tsx

import { Box, Flex } from "@locus-ui/components";
const gaps = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
return gaps.map((gap) => (  <Box key={gap} px="2" py="1">    <Text>{gap}</Text>    <Flex gap={gap}>      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Flex>  </Box>

Directions

The direction prop sets the flex direction: row, row-reverse, column, or column-reverse.

row

Item 1

Item 2

row-reverse

Item 1

Item 2

column

Item 1

Item 2

column-reverse

Item 1

Item 2

directions.tsx

import { Box, Flex } from "@locus-ui/components";
const directions = ["row", "row-reverse", "column", "column-reverse"];
return directions.map((direction) => (  <Box key={direction} px="2" py="1">    <Text>{direction}</Text>    <Flex direction={direction} gap="2">      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Flex>  </Box>

Justify

The justify prop controls the main-axis alignment: start, end, center, between, around, or evenly.

start

Item 1

Item 2

end

Item 1

Item 2

center

Item 1

Item 2

between

Item 1

Item 2

around

Item 1

Item 2

evenly

Item 1

Item 2

justify.tsx

import { Box, Flex } from "@locus-ui/components";
const justifies = ["start", "end", "center", "between", "around", "evenly"];
return justifies.map((justify) => (  <Box key={justify} px="2" py="1">    <Text>{justify}</Text>    <Flex justify={justify} gap="2" className="w-full">      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Flex>  </Box>

Align

The align prop controls the cross-axis alignment: start, end, center, stretch, or baseline.

start

Item 1

Item 2

end

Item 1

Item 2

center

Item 1

Item 2

stretch

Item 1

Item 2

baseline

Item 1

Item 2

align.tsx

import { Box, Flex } from "@locus-ui/components";
const aligns = ["start", "end", "center", "stretch", "baseline"];
return aligns.map((align) => (  <Box key={align} px="2" py="1">    <Text>{align}</Text>    <Flex align={align} gap="2" style={{ height: "100px" }}>      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Flex>  </Box>

Wrap

The wrap prop controls flex wrapping: nowrap, wrap, or wrap-reverse.

nowrap

Item 1

Item 2

Item 3

wrap

Item 1

Item 2

Item 3

wrap-reverse

Item 1

Item 2

Item 3

wrap.tsx

import { Box, Flex } from "@locus-ui/components";
const wraps = ["nowrap", "wrap", "wrap-reverse"];
return wraps.map((wrap) => (  <Box key={wrap} px="2" py="1">    <Text>{wrap}</Text>    <Flex wrap={wrap} gap="2" style={{ width: "200px" }}>      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>      <Box px="2" py="1" className="border">Item 3</Box>    </Flex>