@usevyre/react @usevyre/vue

Box

A spacing-only container with a controlled escape hatch. Use it for token-based padding/margin instead of an inline style. For layout, reach for Stack or Grid.

Uniform padding

padding applies a token to all four sides — spacing comes from the scale, never a magic number.

padding="lg" on every side

 
import { Card, Box, Text } from "@usevyre/react";

<Card>
  <Box padding="lg">
    <Text>padding="lg" on every side</Text>
  </Box>
</Card>

Per-axis padding

paddingX (left + right) and paddingY (top + bottom) set each axis independently.

paddingX="xl" · paddingY="sm"

 
import { Card, Box, Text } from "@usevyre/react";

<Card>
  <Box paddingX="xl" paddingY="sm">
    <Text>paddingX="xl" · paddingY="sm"</Text>
  </Box>
</Card>

Per-side margin

Side-specific props like marginTop give you vertical rhythm without an inline style. Per-side overrides the axis/shorthand.

First card
Pushed down with marginTop="lg"
 
import { Stack, Card, Box } from "@usevyre/react";

<Stack direction="column" gap="none">
  <Card>
    <Box padding="md">First card</Box>
  </Card>
  <Box marginTop="lg">
    <Card>
      <Box padding="md">Pushed down with marginTop="lg"</Box>
    </Card>
  </Box>
</Stack>

Props

Props

Prop Type Default Description
padding "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, all sides.
paddingX "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, left + right.
paddingY "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, top + bottom.
paddingTop "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, top (overrides paddingY/padding).
paddingRight "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, right (overrides paddingX/padding).
paddingBottom "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, bottom (overrides paddingY/padding).
paddingLeft "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Inner spacing, left (overrides paddingX/padding).
margin "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, all sides.
marginX "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, left + right.
marginY "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, top + bottom.
marginTop "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, top (overrides marginY/margin).
marginRight "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, right (overrides marginX/margin).
marginBottom "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, bottom (overrides marginY/margin).
marginLeft "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Outer spacing, left (overrides marginX/margin).
width "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Width — keyword (full=100%, fit, screen) or fixed-rem token size.
height "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" — Height — keyword or fixed-rem token size.
as string "div" HTML tag to render. Still a real DOM element.
style CSSProperties — Anti-pattern escape hatch. Prefer tokens; flagged by the ESLint plugin.
class string — Additional CSS class.
← Badge Breadcrumb →