Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Stack } from "@hua-labs/hua";

1
2
3

1
2
3

spacing="sm"
A
B
C
spacing="md"
A
B
C
spacing="lg"
A
B
C
spacing="xl"
A
B
C

justify="between"
justify="center" align="center"

React
Vue
Angular
Svelte
Solid
Next.js
Nuxt
Remix

direction"vertical" | "horizontal""vertical"Stack direction
spacing"none" | "sm" | "md" | "lg" | "xl""md"Space between items
align"start" | "center" | "end" | "stretch""start"Cross-axis alignment
justify"start" | "center" | "end" | "between" | "around" | "evenly""start"Main-axis alignment
wrapbooleanfalseAllow items to wrap to next line

docs:common.basicUsagetsx
import { Stack } from '@hua-labs/hua';

<Stack spacing="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>
Horizontaltsx
<Stack direction="horizontal" spacing="lg" align="center" justify="between">
  <Button>Left</Button>
  <Button>Right</Button>
</Stack>
Wraptsx
<Stack direction="horizontal" wrap spacing="sm">
  {tags.map(tag => <Badge key={tag}>{tag}</Badge>)}
</Stack>

  • •Semantic HTML: Renders as a semantic container using flexbox for visual layout while preserving logical DOM order for screen readers.
  • •Content Order: Visual stacking direction does not alter the DOM reading order, ensuring assistive technologies read content logically.
  • •Keyboard Navigation: Interactive children within the stack follow natural tab order consistent with the document flow.
GridDivider