@usevyre/react@usevyre/vue

Box

A spacing-only container with a controlled escape hatch. Use it for token-based padding/margin instead of an inlinestyle. For layout, reach for Stackor 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

PropTypeDefaultDescription
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.
asstring"div"HTML tag to render. Still a real DOM element.
styleCSSProperties—Anti-pattern escape hatch. Prefer tokens; flagged by the ESLint plugin.
classstring—Additional CSS class.
← BadgeBreadcrumb →