Styles

Style props

Define a component's style simply by passing props.

Reference table

The following table shows all available style props and the CSS properties they map to.

Margin and padding

tsx
import { Box } from "@hope-ui/core";
// refers to the value of `theme.vars.space["2"]`
<Box m={2}>Tomato</Box>
// you can also use custom values
<Box maxW="960px" mx="auto" />
// applies an `8px`` margin to all viewports and a `12px` margin from the first breakpoint upwards.
<Box m={[2, 3]} />

tsx
import { Box } from "@hope-ui/core";
// refers to the value of `theme.vars.space["2"]`
<Box m={2}>Tomato</Box>
// you can also use custom values
<Box maxW="960px" mx="auto" />
// applies an `8px`` margin to all viewports and a `12px` margin from the first breakpoint upwards.
<Box m={[2, 3]} />

Prop	CSS Property	Theme scale
`m`, `margin`	`margin`	`space`
`mt`, `marginTop`	`margin-top`	`space`
`mr`, `marginRight`	`margin-right`	`space`
`me`, `marginEnd`	`margin-inline-end`	`space`
`mb`, `marginBottom`	`margin-bottom`	`space`
`ml`, `marginLeft`	`margin-left`	`space`
`ms`, `marginStart`	`margin-inline-start`	`space`
`mx`, `marginX`	`margin-inline-start` + `margin-inline-end`	`space`
`my`, `marginY`	`margin-top` + `margin-bottom`	`space`
`p`, `padding`	`padding`	`space`
`pt`, `paddingTop`	`padding-top`	`space`
`pr`, `paddingRight`	`padding-right`	`space`
`pe`, `paddingEnd`	`padding-inline-end`	`space`
`pb`, `paddingBottom`	`padding-bottom`	`space`
`pl`, `paddingLeft`	`padding-left`	`space`
`ps`, `paddingStart`	`padding-inline-start`	`space`
`px`, `paddingX`	`padding-inline-start` + `padding-inline-end`	`space`
`py`, `paddingY`	`padding-top` + `padding-bottom`	`space`

Color

tsx
import { Box } from "@hope-ui/core";
// refers to the value of `theme.vars.colors.neutral["50"]`
<Box color="neutral.50" />
// use raw CSS color value
<Box color="#f00" />
// background colors
<Box backgroundColor="tomato" />
// shorthand prop
<Box bgColor="tomato" />

tsx
import { Box } from "@hope-ui/core";
// refers to the value of `theme.vars.colors.neutral["50"]`
<Box color="neutral.50" />
// use raw CSS color value
<Box color="#f00" />
// background colors
<Box backgroundColor="tomato" />
// shorthand prop
<Box bgColor="tomato" />

Prop	CSS Property	Theme scale
`color`	`color`	`colors`
`bg`, `background`	`background`	`colors`
`bgColor`, `backgroundColor`	`background-color`	`colors`
`opacity`	`opacity`	none

Typography

tsx
import { Text } from "@hope-ui/core";
// refers to the value of `theme.vars.fontSizes.base`
<Text fontSize="base" />
// font-size `32px`
<Text fontSize={32} />
// font-size `"2em"`
<Text fontSize="2em" />
// applies text-align `left` on all viewports and text-align `center` from the first breakpoint and upwards
<Text textAlign={[ "left", "center" ]} />

tsx
import { Text } from "@hope-ui/core";
// refers to the value of `theme.vars.fontSizes.base`
<Text fontSize="base" />
// font-size `32px`
<Text fontSize={32} />
// font-size `"2em"`
<Text fontSize="2em" />
// applies text-align `left` on all viewports and text-align `center` from the first breakpoint and upwards
<Text textAlign={[ "left", "center" ]} />

Prop	CSS Property	Theme scale
`fontFamily`	`font-family`	`fonts`
`fontSize`	`font-size`	`fontSizes`
`fontWeight`	`font-weight`	`fontWeights`
`lineHeight`	`line-height`	`lineHeights`
`letterSpacing`	`letter-spacing`	`letterSpacings`
`textAlign`	`text-align`	none
`fontStyle`	`font-style`	none
`textTransform`	`text-transform`	none
`textDecoration`	`text-decoration`	none

Layout

tsx
import { Box } from "@hope-ui/core";
// verbose
<Box display="flex" />
// shorthand
<Box d="flex" />

tsx
import { Box } from "@hope-ui/core";
// verbose
<Box display="flex" />
// shorthand
<Box d="flex" />

Prop	CSS Property	Theme scale
`d`, `display`	`display`	none
`verticalAlign`	`vertical-align`	none
`overflow`	`overflow`	none
`overflowX`	`overflow-x`	none
`overflowY`	`overflow-y`	none

Size

tsx
import { Box } from "@hope-ui/core";
// verbose
<Box width="100%" height={32} />
// shorthand
<Box w="100%" h="32px" />
// refers to `theme.vars.sizes.sm`
<Box boxSize="sm" />
// width `256px`
<Box w={256} />
// width `"40px"`
<Box w="40px" />

tsx
import { Box } from "@hope-ui/core";
// verbose
<Box width="100%" height={32} />
// shorthand
<Box w="100%" h="32px" />
// refers to `theme.vars.sizes.sm`
<Box boxSize="sm" />
// width `256px`
<Box w={256} />
// width `"40px"`
<Box w="40px" />

Prop	CSS Property	Theme scale
`w`, `width`	`width`	`sizes`
`h`, `height`	`height`	`sizes`
`minW`, `minWidth`	`min-width`	`sizes`
`maxW`, `maxWidth`	`max-width`	`sizes`
`minH`, `minHeight`	`min-height`	`sizes`
`maxH`, `maxHeight`	`max-height`	`sizes`
`boxSize`	`width`, `height`	`sizes`

Flexbox

tsx
import { Box, Flex } from "@hope-ui/core";
// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>
// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>

tsx
import { Box, Flex } from "@hope-ui/core";
// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>
// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>

Props marked with an * will only work if you use the Flex or Stack components.

Prop	CSS Property	Theme scale
`alignContent`	`align-content`	none
`justifyItems`	`justify-items`	none
`alignItems`, *`align`	`align-items`	none
`justifyContent`, *`justify`	`justify-content`	none
`flexDirection`, *`direction`	`flex-direction`	none
`flexWrap`, *`wrap`	`flex-wrap`	none
`flex`	`flex`	none
`flexGrow`	`flex-grow`	none
`flexShrink`	`flex-shrink`	none
`flexBasis`	`flex-basis`	none
`justifySelf`	`justify-self`	none
`alignSelf`	`align-self`	none
`order`	`order`	none

Grid Layout

tsx
import { Box, Grid } from "@hope-ui/core";
// verbose
<Box display="grid" gap={2} gridAutoFlow="row dense">
  Grid
</Box>
// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

tsx
import { Box, Grid } from "@hope-ui/core";
// verbose
<Box display="grid" gap={2} gridAutoFlow="row dense">
  Grid
</Box>
// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

Props marked with an * will only work if you use the Grid and GridItem components.

Prop	CSS Property	Theme scale
`gap`	`grid-gap`	`space`
`rowGap`	`grid-row-gap`	`space`
`columnGap`	`grid-column-gap`	`space`
`gridTemplate`	`grid-template`	none
`gridTemplateColumns`, *`templateColumns`	`grid-template-columns`	none
`gridTemplateRows`, *`templateRows`	`grid-template-rows`	none
`gridTemplateAreas`, *`templateAreas`	`grid-template-areas`	none
`gridArea`, *`area`	`grid-area`	none
`gridColumn`	`grid-column`	none
`gridColumnStart`, *`colStart`	`grid-column-start`	none
`gridColumnEnd`, *`colEnd`	`grid-column-end`	none
`gridRow`	`grid-row`	none
`gridRowStart`, *`rowStart`	`grid-row-start`	none
`gridRowEnd`, *`rowEnd`	`grid-row-end`	none
`gridAutoFlow`, *`autoFlow`	`grid-auto-flow`	none
`gridAutoColumns`, *`autoColumns`	`grid-auto-columns`	none
`gridAutoRows`, *`autoRows`	`grid-auto-rows`	none
`placeItems`	`place-items`	none
`placeContent`	`place-content`	none
`placeSelf`	`place-self`	none

Border

tsx
import { Box } from "@hope-ui/core";
<Box border="1px" borderColor="neutral.200">
  Card
</Box>;

tsx
import { Box } from "@hope-ui/core";
<Box border="1px" borderColor="neutral.200">
  Card
</Box>;

Prop	CSS Property	Theme scale
`border`	`border`	`borders`
`borderWidth`	`border-width`	`borderWidths`
`borderStyle`	`border-style`	`borderStyles`
`borderColor`	`border-color`	`colors`
`borderTop`	`border-top`	`borders`
`borderTopWidth`	`border-top-width`	`borderWidths`
`borderTopStyle`	`border-top-style`	`borderStyles`
`borderTopColor`	`border-top-color`	`colors`
`borderRight`	`border-right`	`borders`
`borderRightWidth`	`border-right-width`	`borderWidths`
`borderRightStyle`	`border-right-style`	`borderStyles`
`borderRightColor`	`border-right-color`	`colors`
`borderBottom`	`border-bottom`	`borders`
`borderBottomWidth`	`border-bottom-width`	`borderWidths`
`borderBottomStyle`	`border-bottom-style`	`borderStyles`
`borderBottomColor`	`border-bottom-color`	`colors`
`borderLeft`	`border-left`	`borders`
`borderLeftWidth`	`border-left-width`	`borderWidths`
`borderLeftStyle`	`border-left-style`	`borderStyles`
`borderLeftColor`	`border-left-color`	`colors`
`borderX`	`border-left` , `border-right`	`borders`
`borderY`	`border-top` , `border-bottom`	`borders`

Border Radius

tsx
import { Button } from "@hope-ui/core";
// this button will have no right borderRadius
<Button borderRightRadius={0}>Button 1</Button>
// this button will have no left borderRadius
<Button borderLeftRadius={0}>Button 2</Button>
// top left and top right radius will be `theme.vars.radii.md`
<Button borderTopRadius="md">Button 2</Button>

tsx
import { Button } from "@hope-ui/core";
// this button will have no right borderRadius
<Button borderRightRadius={0}>Button 1</Button>
// this button will have no left borderRadius
<Button borderLeftRadius={0}>Button 2</Button>
// top left and top right radius will be `theme.vars.radii.md`
<Button borderTopRadius="md">Button 2</Button>

Prop	CSS Property	Theme scale
`borderRadius`, `rounded`	`border-radius`	`radii`
`borderTopLeftRadius`	`border-top-left-radius`	`radii`
`borderTopRightRadius`	`border-top-right-radius`	`radii`
`borderBottomRightRadius`	`border-bottom-right-radius`	`radii`
`borderBottomLeftRadius`	`border-bottom-left-radius`	`radii`
`borderTopRadius`, `roundedTop`	`border-top-left-radius` + `border-top-right-radius`	`radii`
`borderRightRadius`, `roundedRight`	`border-top-right-radius` + `border-bottom-right-radius`	`radii`
`borderBottomRadius`, `roundedBottom`	`border-bottom-left-radius` + `border-bottom-right-radius`	`radii`
`borderLeftRadius`, `roundedLeft`	`border-top-left-radius` + `border-bottom-left-radius`	`radii`

Position

tsx
import { Box } from "@hope-ui/core";
// verbose
<Box position="absolute">Cover</Box>
// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top={0} left={0}>
  Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
  Fixed with zIndex
</Box>

tsx
import { Box } from "@hope-ui/core";
// verbose
<Box position="absolute">Cover</Box>
// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top={0} left={0}>
  Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
  Fixed with zIndex
</Box>

Prop	CSS Property	Theme scale
`pos`, `position`	`position`	none
`zIndex`	`z-index`	`zIndices`
`top`	`top`	`space`
`right`	`right`	`space`
`bottom`	`bottom`	`space`
`left`	`left`	`space`

Shadow

tsx
import { Box } from "@hope-ui/core";
// refers to `theme.vars.shadows.md`
<Box boxShadow="md">Shadow md</Box>;

tsx
import { Box } from "@hope-ui/core";
// refers to `theme.vars.shadows.md`
<Box boxShadow="md">Shadow md</Box>;

Prop	CSS Property	Theme scale
`textShadow`	`text-shadow`	`shadows`
`shadow`, `boxShadow`	`box-shadow`	`shadows`

Pseudo selector

tsx
import { Box } from "@hope-ui/core";
// :hover style
<Box
  _hover={{
    background: "white",
    color: "primary.500",
  }}
>
  Hover me
</Box>
// apply :hover over parent element
<Box role="group">
  <Box
    _hover={{ fontWeight: "semibold" }}
    _groupHover={{ color: "tomato" }}
  >
    Hover me
  </Box>
</Box>
// add ::before pseudo-element
// Note: the content value needs an extra set of quotes!
<Box
  _before={{
    content: "'🙂'",
    display: "inline-block",
    mr: "5px"
  }}
>
  A pseudo element
</Box>

tsx
import { Box } from "@hope-ui/core";
// :hover style
<Box
  _hover={{
    background: "white",
    color: "primary.500",
  }}
>
  Hover me
</Box>
// apply :hover over parent element
<Box role="group">
  <Box
    _hover={{ fontWeight: "semibold" }}
    _groupHover={{ color: "tomato" }}
  >
    Hover me
  </Box>
</Box>
// add ::before pseudo-element
// Note: the content value needs an extra set of quotes!
<Box
  _before={{
    content: "'🙂'",
    display: "inline-block",
    mr: "5px"
  }}
>
  A pseudo element
</Box>

Prop	CSS Property	Theme scale
`_hover`	`&:hover`, `&[data-hover]`	none
`_active`	`&:active`, `&[data-active]`	none
`_focus`	`&:focus`, `&[data-focus]`	none
`_highlighted`	`&[data-highlighted]`	none
`_focusWithin`	`&:focus-within`	none
`_focusVisible`	`&:focus-visible`	none
`_disabled`	`&[disabled]`, `&[aria-disabled=true]`, `&[data-disabled]`	none
`_readOnly`	`&[aria-readonly=true]`, `&[readonly]`, `&[data-readonly]`	none
`_before`	`&::before`	none
`_after`	`&::after`	none
`_empty`	`&:empty`	none
`_expanded`	`&[aria-expanded=true]`, `&[data-expanded]`	none
`_checked`	`&[aria-checked=true]`, `&[data-checked]`	none
`_grabbed`	`&[aria-grabbed=true]`, `&[data-grabbed]`	none
`_pressed`	`&[aria-pressed=true]`, `&[data-pressed]`	none
`_invalid`	`&[aria-invalid=true]`, `&[data-invalid]`	none
`_valid`	`&[data-valid]`, `&[data-state=valid]`	none
`_loading`	`&[data-loading]`, `&[aria-busy=true]`	none
`_selected`	`&[aria-selected=true]`, `&[data-selected]`	none
`_hidden`	`&[hidden]`, `&[data-hidden]`	none
`_autofill`	`&:-webkit-autofill`	none
`_even`	`&:nth-of-type(even)`	none
`_odd`	`&:nth-of-type(odd)`	none
`_first`	`&:first-child`	none
`_last`	`&:last-child`	none
`_notFirst`	`&:not(:first-child)`	none
`_notLast`	`&:not(:last-child)`	none
`_visited`	`&:visited`	none
`_activeLink`	`&[aria-current=page]`	none
`_activeStep`	`&[aria-current=step]`	none
`_indeterminate`	`&:indeterminate`, `&[aria-checked=mixed]`, `&[data-indeterminate]`	none
`_groupHover`	`[role=group]:hover &`, `[role=group][data-hover] &`, `[data-group]:hover &`, `[data-group][data-hover] &`, `.group:hover &`, `.group[data-hover] &`	none
`_peerHover`	`[data-peer]:hover ~ &`, `[data-peer][data-hover] ~ &`, `.peer:hover ~ &`, `.peer[data-hover] ~ &`	none
`_groupFocus`	`[role=group]:focus &`, `[role=group][data-focus] &`, `[data-group]:focus &`, `[data-group][data-focus] &`, `.group:focus &`, `.group[data-focus] &`	none
`_peerFocus`	`[data-peer]:focus ~ &`, `[data-peer][data-focus] ~ &`, `.peer:focus ~ &`, `.peer[data-focus] ~ &`	none
`_groupFocusVisible`	`[role=group]:focus-visible &`, `[data-group]:focus-visible &`, `.group:focus-visible &`	none
`_peerFocusVisible`	`[data-peer]:focus-visible ~ &`, `.peer:focus-visible ~ &`	none
`_groupActive`	`[role=group]:active &`, `[role=group][data-active] &`, `[data-group]:active &`, `[data-group][data-active] &`, `.group:active &`, `.group[data-active] &`	none
`_peerActive`	`[data-peer]:active ~ &`, `[data-peer][data-active] ~ &`, `.peer:active ~ &`, `.peer[data-active] ~ &`	none
`_groupDisabled`	`[role=group]:disabled &`, `[role=group][data-disabled] &`, `[data-group]:disabled &`, `[data-group][data-disabled] &`, `.group:disabled &`, `.group[data-disabled] &`	none
`_peerDisabled`	`[data-peer]:disabled ~ &`, `[data-peer][data-disabled] ~ &`, `.peer:disabled ~ &`, `.peer[data-disabled] ~ &`	none
`_groupInvalid`	`[role=group]:invalid &`, `[role=group][data-invalid] &`, `[data-group]:invalid &`, `[data-group][data-invalid] &`, `.group:invalid &`, `.group[data-invalid] &`	none
`_peerInvalid`	`[data-peer]:invalid ~ &`, `[data-peer][data-invalid] ~ &`, `.peer:invalid ~ &`, `.peer[data-invalid] ~ &`	none
`_groupChecked`	`[role=group]:checked &`, `[role=group][data-checked] &`, `[data-group]:checked &`, `[data-group][data-checked] &`, `.group:checked &`, `.group[data-checked] &`	none
`_peerChecked`	`[data-peer]:checked ~ &`, `[data-peer][data-checked] ~ &`, `.peer:checked ~ &`, `.peer[data-checked] ~ &`	none
`_groupFocusWithin`	`[role=group]:focus-within &`, `[data-group]:focus-within &`, `.group:focus-within &`	none
`_peerFocusWithin`	`[data-peer]:focus-within ~ &`, `.peer:focus-within ~ &`	none
`_peerPlaceholderShown`	`[data-peer]:placeholder-shown ~ &`, `.peer:placeholder-shown ~ &`	none
`_placeholder`	`&::placeholder`	none
`_placeholderShown`	`&:placeholder-shown`	none
`_fullScreen`	`&:fullscreen`	none
`_selection`	`&::selection`	none
`_rtl`	`[dir=rtl] &`, `&[dir=rtl]`	none
`_ltr`	`[dir=ltr] &`, `&[dir=ltr]`	none
`_mediaDark`	`@media (prefers-color-scheme: dark)`	none
`_mediaReduceMotion`	`@media (prefers-reduced-motion: reduce)`	none
`_light`	`.hope-theme-light &`, `[data-theme=light] &`, `&[data-theme=light]`	none
`_dark`	`.hope-theme-dark &`, `[data-theme=dark] &`, `&[data-theme=dark]`	none

Others

Prop	CSS Property	Theme scale
`appearance`	`appearance`	none
`userSelect`	`user-select`	none
`pointerEvents`	`pointer-events`	none
`resize`	`resize`	none
`cursor`	`cursor`	none
`outline`	`outline`	none
`outlineOffset`	`outline-offset`	none
`outlineColor`	`outline-color`	`colors`
`transform`	`transform`	none
`transformOrigin`	`transform-origin`	none
`clipPath`	`clip-path`	none
`transition`	`transition`	none
`transitionProperty`	`transition-property`	none
`transitionTimingFunction`	`transition-timing-function`	none
`transitionDuration`	`transition-duration`	none
`transitionDelay`	`transition-delay`	none
`animation`	`animation`	none
`willChange`	`will-change`	none
`objectFit`	`object-fit`	none
`objectPosition`	`object-position`	none

The `as` prop

All Hope UI components are polymorphic, meaning you can use the as prop to change the rendered element.

For example, say you are using the Button component, and you need to make it a link instead. You can compose a and Button like below:

Go to the SolidJS website

tsx
<Button as="a" target="_blank" href="https://solidjs.com">
  Go to the SolidJS website
</Button>

tsx
<Button as="a" target="_blank" href="https://solidjs.com">
  Go to the SolidJS website
</Button>

And it works with SolidJS components too:

Back to home

tsx
import { Link } from "@solidjs/router";
function App() {
  return (
    <Button as={Link} href="/">
      Back to home
    </Button>
  );
}

tsx
import { Link } from "@solidjs/router";
function App() {
  return (
    <Button as={Link} href="/">
      Back to home
    </Button>
  );
}