The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Box

Primitive for consuming design tokens

You can use the Box primitive to create a DOM element that applies any of the available design tokens.

<Box

  alignItems="center"

  backgroundColor="neutral4"

  borderRadius="large"

  color="neutral12"

  display="flex"

  justifyContent="space-between"

  padding="6"

>

  <Box

    borderWidth="2"

    borderStyle="solid"

    borderRadius="medium"

    color="accent11"

    padding="2"

  >

    Hello world

  </Box>

  <Box

    borderWidth="2"

    borderStyle="solid"

    borderRadius="medium"

    color="accent11"

    padding="2"

  >

    Hello world

  </Box>

</Box>

Props
Link to this heading

React.AllHTMLAttributes properties are supported, but not listed below for brevity.

<Box>

import { Box } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
alignSelf
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
ElementType<any>
div
backgroundColor
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
borderBottomLeftRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderBottomRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderBottomRightRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderBottomStyle
ConditionalStyle<Values<{ none: CSSVarFunction; solid: CSSVarFunction; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderBottomWidth
ConditionalStyle<Values<{ 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; 3: CSSVarFunction; 4: CSSVarFunction; 5: CSSVarFunction; }, { ...; }>>
-
borderColor
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
borderLeftRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderLeftWidth
ConditionalStyle<Values<{ 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; 3: CSSVarFunction; 4: CSSVarFunction; 5: CSSVarFunction; }, { ...; }>>
-
borderRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderRightRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderRightWidth
ConditionalStyle<Values<{ 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; 3: CSSVarFunction; 4: CSSVarFunction; 5: CSSVarFunction; }, { ...; }>>
-
borderStyle
ConditionalStyle<Values<{ none: CSSVarFunction; solid: CSSVarFunction; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderTopLeftRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderTopRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderTopRightRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
-
borderTopStyle
ConditionalStyle<Values<{ none: CSSVarFunction; solid: CSSVarFunction; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
borderTopWidth
ConditionalStyle<Values<{ 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; 3: CSSVarFunction; 4: CSSVarFunction; 5: CSSVarFunction; }, { ...; }>>
-
borderWidth
ConditionalStyle<Values<{ 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; 3: CSSVarFunction; 4: CSSVarFunction; 5: CSSVarFunction; }, { ...; }>>
-
bottom
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
boxShadow
ConditionalStyle<Values<{ none: { boxShadow: "none"; }; small: { boxShadow: CSSVarFunction; }; medium: { boxShadow: CSSVarFunction; }; large: { boxShadow: CSSVarFunction; }; }, { ...; }>>
-
className
ClassValue
-
color
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
cursor
"default" | "not-allowed" | "pointer"
-
display
ConditionalStyle<Values<("none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | "contents")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flex
ConditionalStyle<Values<{ 1: "1 1 0%"; auto: "1 1 auto"; initial: "0 1 auto"; none: "none"; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexBasis
ConditionalStyle<Values<{ screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; auto: CSSVarFunction; 0: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
flexDirection
ConditionalStyle<Values<("column" | "row")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexGrow
ConditionalStyle<Values<readonly [0, 1, 2, 3, 4], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexShrink
ConditionalStyle<Values<readonly [0, 1, 2, 3, 4], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
flexWrap
ConditionalStyle<Values<("nowrap" | "wrap")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
fontFamily
"mono" | "sans"
-
fontSize
ConditionalStyle<Values<{ inherit: "inherit"; headingOne: CSSVarFunction; headingTwo: CSSVarFunction; headingThree: CSSVarFunction; extraLarge: CSSVarFunction; ... 4 more ...; root: CSSVarFunction; }, { ...; }>>
-
fontWeight
ConditionalStyle<Values<{ normal: CSSVarFunction; light: CSSVarFunction; medium: CSSVarFunction; semiBold: CSSVarFunction; bold: CSSVarFunction; }, { ...; }>>
-
gap
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
height
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
inset
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
justifySelf
ConditionalStyle<Values<readonly ["flex-start", "center", "flex-end", "stretch"], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
left
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
letterSpacing
ConditionalStyle<Values<{ normal: CSSVarFunction; [-0.02]: CSSVarFunction; [-0.015]: CSSVarFunction; [-0.01]: CSSVarFunction; 0.03: CSSVarFunction; }, { ...; }>>
-
lineHeight
ConditionalStyle<Values<{ none: CSSVarFunction; normal: CSSVarFunction; 1.25: CSSVarFunction; 1.375: CSSVarFunction; 1.5: CSSVarFunction; 1.625: CSSVarFunction; 2: CSSVarFunction; }, { ...; }>>
-
margin
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
marginBottom
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
marginLeft
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
marginRight
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
marginTop
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
marginX
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
marginY
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
maxHeight
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
maxWidth
ConditionalStyle<Values<{ none: "none"; screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; auto: CSSVarFunction; ... 20 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
minHeight
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
minWidth
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
opacity
"0" | "25" | "50" | "75" | "100"
-
outlineColor
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
-
overflow
ConditionalStyle<Values<("unset" | "auto" | "hidden" | "scroll")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
padding
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
paddingBottom
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
paddingLeft
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
paddingRight
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
paddingTop
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
paddingX
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
paddingY
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
pointerEvents
"none"
-
position
ConditionalStyle<Values<("absolute" | "fixed" | "relative" | "sticky")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
ref
Ref<HTMLElement>
-
right
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
strokeWidth
"0" | "1" | "2" | "3" | "4" | "5"
-
textAlign
ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
textTransform
"capitalize" | "lowercase" | "uppercase"
-
top
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
transitionDuration
ConditionalStyle<Values<{ 300: CSSVarFunction; 600: CSSVarFunction; 150: CSSVarFunction; 3000: CSSVarFunction; }, { defaultClass: string; conditions: { ...; }; }>>
-
transitionProperty
"none" | "opacity" | "transform" | "all" | "colors" | "default" | "shadow"
-
transitionTimingFunction
"linear" | "in" | "out" | "inOut"
-
visibility
"hidden" | "visible"
-
whiteSpace
"inherit" | "initial" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"
-
width
ConditionalStyle<Values<{ screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; auto: CSSVarFunction; 0: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
wordBreak
"break-word"
-
wordWrap
"inherit" | "initial" | "normal" | "break-word"
-
zIndex
"auto" | "0" | "50" | "75" | "100" | "10" | "20" | "30" | "40"
-
Edit on GitHub