Style Props

React Suite provides a series of style property shorthands for more concise style settings. These properties directly map to their corresponding CSS properties.

Usage

Theme Values

Provided theme presets, for example:

<Box bg='blue.600' />
<Box rounded='lg' />

Responsive Values

Provided responsive values, for example:

<Box w={{ xs: '100%', md: '80%', lg: '60%' }} />
<Box p={{ xs: '10px', md: '20px' }} />

Style Props Reference

Property	CSS Property	Theme Values
`p`	`padding`	-
`pt`	`paddingTop`	-
`pr`	`paddingRight`	-
`pb`	`paddingBottom`	-
`pl`	`paddingLeft`	-
`px`	`paddingInline`	-
`py`	`paddingBlock`	-
`ps`	`paddingInlineStart`	-
`pe`	`paddingInlineEnd`	-
`m`	`margin`	-
`mt`	`marginTop`	-
`mr`	`marginRight`	-
`mb`	`marginBottom`	-
`ml`	`marginLeft`	-
`mx`	`marginInline`	-
`my`	`marginBlock`	-
`ms`	`marginInlineStart`	-
`me`	`marginInlineEnd`	-
`w`	`width`	-
`h`	`height`	-
`minw`	`minWidth`	-
`maxw`	`maxWidth`	-
`minh`	`minHeight`	-
`maxh`	`maxHeight`	-
`display`	`display`	-
`pos`	`position`	-
`left`	`left`	-
`top`	`top`	-
`right`	`right`	-
`bottom`	`bottom`	-
`inset`	`inset`	-
`insetx`	`insetInline`	-
`insety`	`insetBlock`	-
`bsz`	`boxSizing`	-
`z`	`zIndex`	-
`bg`	`background`	ColorScheme
`bgc`	`backgroundColor`	ColorScheme
`bgi`	`backgroundImage`	-
`bga`	`backgroundAttachment`	-
`bgp`	`backgroundPosition`	-
`bgsz`	`backgroundSize`	-
`bgr`	`backgroundRepeat`	-
`c`	`color`	ColorScheme
`ff`	`fontFamily`	-
`fs`	`fontSize`	-
`fw`	`fontWeight`	-
`ta`	`textAlign`	-
`tt`	`textTransform`	-
`td`	`textDecoration`	-
`tds`	`textDecorationStyle`	-
`tdc`	`textDecorationColor`	ColorScheme
`lts`	`letterSpacing`	-
`lh`	`lineHeight`	-
`bd`	`border`	-
`bs`	`borderStyle`	-
`bc`	`borderColor`	ColorScheme
`bw`	`borderWidth`	-
`bdt`	`borderTop`	-
`bdb`	`borderBottom`	-
`bdl`	`borderLeft`	-
`bdr`	`borderRight`	-
`bdts`	`borderTopStyle`	-
`bdbs`	`borderBottomStyle`	-
`bdls`	`borderLeftStyle`	-
`bdrs`	`borderRightStyle`	-
`bdtc`	`borderTopColor`	ColorScheme
`bdbc`	`borderBottomColor`	ColorScheme
`bdlc`	`borderLeftColor`	ColorScheme
`bdrc`	`borderRightColor`	ColorScheme
`bdtw`	`borderTopWidth`	-
`bdbw`	`borderBottomWidth`	-
`bdlw`	`borderLeftWidth`	-
`bdrw`	`borderRightWidth`	-
`rounded`	`borderRadius`	Size
`shadow`	`boxShadow`	Size
`opacity`	`opacity`	-
`spacing`	`gap`	-
`gap`	`gap`	-
`rowgap`	`rowGap`	-
`colgap`	`columnGap`	-
`align`	`alignItems`	-
`justify`	`justifyContent`	-
`self`	`alignSelf`	-
`basis`	`flexBasis`	-
`flex`	`flex`	-
`grow`	`flexGrow`	-
`order`	`order`	-
`shrink`	`flexShrink`	-

Type Definitions

`Breakpoints`

type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

`Size`

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

`ColorScheme`

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
type ShadeValue = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

// Color with shade type (e.g., red.50, blue.500)
type ColorShade = `${Colours}.${ShadeValue}` | `${ColorGray}.${ShadeValue}`;

// Combined type that allows both basic colors and colors with shades
type ColorScheme = Color | ColorShade;

Style Props #

Usage #

Theme Values #

Responsive Values #

Style Props Reference #

Type Definitions #

Breakpoints #

Size #

ColorScheme #