Skip to content
Docs

@hua-labs/ui
v1.1.0

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

size="sm"

max-w-2xl (672px)

size="md"

max-w-4xl (896px)

size="lg"

max-w-6xl (1152px)

size="xl"

max-w-7xl (1280px)

padding="none"

padding="sm"

padding="md"

padding="lg"

size"sm" | "md" | "lg" | "xl" | "full""lg"Maximum width of the container
padding"none" | "sm" | "md" | "lg" | "xl""md"Horizontal padding
centeredbooleantrueCenter the container horizontally
fluidbooleanfalseMake the container full-width

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

<Container>
  <h1>Title</h1>
  <p>Content</p>
</Container>
Sizestsx
// sm: 672px, md: 896px, lg: 1152px, xl: 1280px
<Container size="sm">...</Container>
<Container size="md">...</Container>
<Container size="lg">...</Container>
<Container size="xl">...</Container>
Fluidtsx
<Container fluid padding="xl">
  Full width content
</Container>

  • •Semantic HTML: Renders as a semantic HTML element; use role="region" with an aria-label when the container represents a distinct page section.
  • •Landmark Structure: Can serve as a layout landmark when paired with appropriate ARIA attributes to aid screen reader navigation.
  • •Responsive Layout: Content reflows properly at all breakpoints ensuring readability without horizontal scrolling.
CardGrid