Box

A versatile container component that serves as a building block for layouts. It can render as any HTML element and accepts all standard HTML attributes, making it perfect for creating custom components and layouts.

Basic Usage

This is a Box component

import { Box } from 'uiplex';

<Box
  style={{
    padding: "1rem",
    background: "var(--accent-primary)",
    color: "white",
    borderRadius: "4px",
  }}
>
  This is a Box component
</Box>

Polymorphic "as" Prop

Rendered as <section>

Rendered as <article>

Rendered as <header>

<Box as="section">Rendered as section</Box>
<Box as="article">Rendered as article</Box>
<Box as="header">Rendered as header</Box>
<Box as="footer">Rendered as footer</Box>

Styling

Primary styled box

Outlined box

Box with shadow

<Box style={{ padding: "1rem", background: "var(--accent-primary)", color: "white" }}>
  Primary styled box
</Box>
<Box style={{ padding: "1rem", border: "2px solid var(--accent-primary)" }}>
  Outlined box
</Box>
<Box style={{ padding: "1rem", boxShadow: "0 2px 4px rgba(0,0,0,0.1)" }}>
  Box with shadow
</Box>

Card Example

Card Title

This is a card built using the Box component. It demonstrates how Box can be used as a building block for more complex components.

<Box
  style={{
    padding: "1.5rem",
    border: "1px solid var(--border-primary)",
    borderRadius: "8px",
    boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
  }}
>
  <Flex direction="column" gap={12}>
    <h3>Card Title</h3>
    <p>Card content goes here</p>
    <Flex gap={8} justify="end">
      <Box as="button">Cancel</Box>
      <Box as="button">Save</Box>
    </Flex>
  </Flex>
</Box>

Layout Example

Header

Main Content

<Flex direction="column" gap={16}>
  <Box as="header">Header</Box>
  <Flex gap={16}>
    <Box as="aside" style={{ flex: "0 0 200px" }}>
      Sidebar
    </Box>
    <Box as="main" style={{ flex: "1" }}>
      Main Content
    </Box>
  </Flex>
  <Box as="footer">Footer</Box>
</Flex>

Layout Props

Position: relative, Width: 200px, Height: 100px

Absolute positioned

Inline block with border

<Box
  position="relative"
  width={200}
  height={100}
  padding={16}
  backgroundColor="var(--accent-primary)"
  color="white"
  borderRadius={8}
>
  Content
</Box>

<Box
  position="absolute"
  top={0}
  right={0}
  padding={8}
>
  Absolute positioned
</Box>

<Box
  display="inline-block"
  padding={12}
  margin={8}
  border="2px solid var(--accent-primary)"
>
  Inline block
</Box>

API Reference

Prop	Type	Default	Description
children	React.ReactNode	-	Child elements
as	keyof JSX.IntrinsicElements	"div"	HTML element to render as
position	"static" \| "relative" \| "absolute" \| "fixed" \| "sticky"	-	CSS position property
top, right, bottom, left	number \| string	-	Position offsets (number in px or string)
zIndex	number \| string	-	Z-index value
display	"block" \| "inline-block" \| "inline" \| "flex" \| "inline-flex" \| "grid" \| "none"	-	CSS display property
width, height	number \| string	-	Width and height (number in px or string)
minWidth, maxWidth, minHeight, maxHeight	number \| string	-	Size constraints (number in px or string)
padding, margin	number \| string	-	Spacing (number in px or string)
paddingTop, paddingRight, etc.	number \| string	-	Individual spacing properties
backgroundColor, bg	string	-	Background color (bg is alias)
color	string	-	Text color
border, borderWidth, borderColor, borderRadius	number \| string	-	Border properties
boxShadow, shadow	string	-	Box shadow (shadow is alias)
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles (merged with computed styles)
...props	React.HTMLAttributes<HTMLDivElement>	-	All standard HTML div attributes