Components

Component

Layout

Composition group for Flex, Grid, Stack, Float, and Box layout patterns.

ReactReact Native4 props
PreviewReact

Grid area

Stack

Responsive layout

Imports

import { Box, Flex, Grid, GridItem, HStack, VStack, Float } from "@hozorica/hods-react";
import { Box, Flex, Grid, GridItem, HStack, VStack, Float } from "@hozorica/hods-react-native";

Props

PropTypeDescription
gap / p / mDimensionToken | 0Spacing primitives for layout rhythm.
align / justify / wrapLayout aliasesFlex and stack alignment controls.
columns / colSpannumber | stringGrid structure and placement.
placementFloatPlacementNine-point Float positioning.

Platform Support

React

Covers CSS flex, grid, absolute float placement, and tokenized layout props.

React Native

Maps to React Native flexbox and simplified grid placement.

Usage

<Grid columns={3} gap="x3"><GridItem colSpan={2}>Wide</GridItem></Grid>

Notes

  • Use HStack/VStack for simple one-axis composition.
  • Use Grid for repeated cards and token swatches.
  • Use Float only inside a positioned parent with stable dimensions.