Components

Component

Primitives

Foundational Box, Text, media, and layout primitives.

ReactReact Native3 props
PreviewReact

Primitive surface

Box, Text, Article, AspectRatio, and layout primitives share the same token contract.

Stable media frame

Imports

import { Box, Text, Article, AspectRatio, Flex, Grid, Float } from "@hozorica/hods-react";
import { Box, Text, Article, AspectRatio, Flex, Grid, Float } from "@hozorica/hods-react-native";

Props

PropTypeDescription
tokensColorToken | DimensionToken | RadiusTokenShared token props across primitive components.
compositionas | asChild | childrenWeb composition hooks plus shared children rendering.
layoutFlex | Grid | Float propsLayout aliases for alignment, placement, and spacing.

Platform Support

React

Exports the token-aware primitive surface used by higher-level React components.

React Native

Provides matching primitive concepts with React Native layout and text constraints.

Usage

<Box bg="bg.neutralWeak" borderRadius="r2" p="x4"><Text textStyle="body">Content</Text></Box>

Notes

  • Use primitives to compose components before adding bespoke CSS.
  • Prefer semantic Text and Article for content instead of styling raw elements.
  • Primitives are the contract layer behind most component previews.