Skip to content

Box

Primitive for consuming design tokens
import { Box } from 'degen'

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

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
aspectRatio
"auto" | "1/1" | "2/1" | "4/1" | "4/3" | "16/9"
-
backgroundColor
ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>>
-
borderBottomLeftRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderBottomRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderBottomRightRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderBottomWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
borderColor
ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>>
-
borderLeftRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderLeftWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
borderRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderRightRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderRightWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
borderTopLeftRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderTopRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderTopRightRadius
ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>>
-
borderTopWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
borderWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.375': string; '0.5': string; '0.75': string; '1': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
bottom
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
boxShadow
ConditionalStyle<Values<{ '1': { vars: { [x: string]: CSSVarFunction; }; boxShadow: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${...
-
boxShadowColor
ConditionalStyle<Values<{ foregroundSecondary: { vars: { [x: string]: CSSVarFunction; }; }; transparent: { vars: { [x: string]: CSSVarFunction; }; }; }, { defaultClass: string; conditions: { ...; }; }>>
-
className
ClassValue
-
color
ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>>
-
cursor
"default" | "not-allowed" | "pointer"
-
display
ConditionalStyle<Values<("none" | "block" | "flex" | "grid" | "inline-block" | "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<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: 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; extraLarge: CSSVarFunction; large: CSSVarFunction; ... 4 more ...; root: CSSVarFunction; }, { ...; }>>
-
fontWeight
ConditionalStyle<Values<MapLeafNodes<{ light: string; normal: string; medium: string; semiBold: string; bold: string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
gap
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
height
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
inset
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
isolation
"isolate"
-
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<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
letterSpacing
ConditionalStyle<Values<MapLeafNodes<{ '-0.02': string; '-0.015': string; '-0.01': string; normal: string; '0.03': string; }, CSSVarFunction>, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
lineHeight
ConditionalStyle<Values<MapLeafNodes<{ normal: string; none: string; '1.25': string; '1.375': string; '1.5': string; '1.625': string; '2': string; }, CSSVarFunction>, { defaultClass: string; conditions: { ...; }; }>>
-
margin
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
marginBottom
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
marginLeft
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
marginRight
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
marginTop
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
marginX
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
marginY
ConditionalStyle<Values<{ "-px": string; [-0.5]: string; [-1]: string; [-1.5]: string; [-2]: string; [-2.5]: string; [-3]: string; [-3.5]: string; [-4]: string; 0: CSSVarFunction; px: CSSVarFunction; 0.5: CSSVarFunction; ... 43 more ...; none: CSSVarFunction; }, { ...; }>>
-
maxHeight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
maxWidth
ConditionalStyle<Values<{ none: "none"; '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; ... 49 more ...; viewWidth: CSSVarFunction; }, { ......
-
minHeight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
minWidth
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
objectFit
"contain" | "cover"
-
opacity
"0" | "50" | "100"
-
outlineColor
ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 19 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>>
-
overflow
ConditionalStyle<Values<("unset" | "auto" | "hidden" | "scroll")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
padding
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
paddingBottom
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
paddingLeft
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
paddingRight
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
paddingTop
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
paddingX
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
paddingY
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
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>
-
reset
"table" | "button" | "textarea" | "menu" | "input" | "a" | "article" | "aside" | "blockquote" | "body" | "details" | "div" | "figcaption" | "figure" | "footer" | "header" | "hgroup" | ... 6 more ... | "ul"
-
right
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
strokeWidth
"1" | "0" | "2" | "0.5" | "px" | "0.375" | "0.75"
-
textAlign
ConditionalStyle<Values<("center" | "left" | "right")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
textTransform
"capitalize" | "lowercase" | "uppercase"
-
top
ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ...
-
transitionDuration
ConditionalStyle<Values<{ '75': "75ms"; '100': "100ms"; '150': "150ms"; '200': "200ms"; '300': "300ms"; '500': "500ms"; '700': "700ms"; '1000': "1000ms"; }, { defaultClass: string; conditions: { base: string; }; }>>
-
transitionProperty
"opacity" | "transform" | "all" | "colors" | "none" | "default" | "shadow"
-
transitionTimingFunction
"linear" | "in" | "out" | "inOut"
-
visibility
"hidden" | "visible"
-
whiteSpace
"inherit" | "initial" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"
-
width
ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: CSSVarFunction; }, { ...; }>>
-
wordBreak
"break-word"
-
wordWrap
"inherit" | "initial" | "normal" | "break-word"
-
zIndex
"auto" | "0" | "50" | "100" | "10" | "20" | "40" | "30" | "75"
-