PseudoBox

This component is inspired by Tailwind CSS Pseudo-Class variants and Glamorous Pseudo.

PseudoBox composes Box component and provides props to style common CSS pseudo selectors.

Styling elements on hover, focus, and more can be accomplished by prefixing _ with the appropriate pseudo selector.

For example, to style &:hover, use the _hover prop and pass the style props. We use the underscore _ notation to visually separate pseudo style props from regular style props.

Usage#

<Flex as="form">
  <PseudoBox
    as="input"
    placeholder="Your email"
    type="email"
    flex="1"
    py={2}
    px={4}
    rounded="md"
    bg="gray.100"
    borderWidth="1px"
    _hover={{ borderColor: "gray.200", bg: "gray.200" }}
    _focus={{
      outline: "none",
      bg: "white",
      boxShadow: "outline",
      borderColor: "gray.300",
    }}
  />
  <PseudoBox
    as="button"
    bg="teal.500"
    py={2}
    px={4}
    ml={3}
    rounded="md"
    fontWeight="semibold"
    color="white"
    _hover={{ bg: "teal.600" }}
    _focus={{ boxShadow: "outline" }}
  >
    Sign Up
  </PseudoBox>
</Flex>

<Flex as="form">
  <PseudoBox
    as="input"
    placeholder="Your email"
    type="email"
    flex="1"
    py={2}
    px={4}
    rounded="md"
    bg="gray.100"
    borderWidth="1px"
    _hover={{ borderColor: "gray.200", bg: "gray.200" }}
    _focus={{
      outline: "none",
      bg: "white",
      boxShadow: "outline",
      borderColor: "gray.300",
    }}
  />
  <PseudoBox
    as="button"
    bg="teal.500"
    py={2}
    px={4}
    ml={3}
    rounded="md"
    fontWeight="semibold"
    color="white"
    _hover={{ bg: "teal.600" }}
    _focus={{ boxShadow: "outline" }}
  >
    Sign Up
  </PseudoBox>
</Flex>

Editable Example

PseudoBox includes first-class support for styling elements on hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, focus-within, and more.

It was created to help reduce the need to pass css prop or use styled(...) function to style common pseudo states.

Hover#

Add the _hover prop to only apply style props on hover.

<PseudoBox
  as="button"
  color="blue.700"
  fontWeight="semibold"
  py={2}
  px={4}
  borderWidth="1px"
  borderColor="blue.500"
  rounded="md"
  _hover={{ bg: "blue.500", color: " white" }}
  _focus={{ boxShadow: "outline" }}
>
  Hover me
</PseudoBox>

<PseudoBox
  as="button"
  color="blue.700"
  fontWeight="semibold"
  py={2}
  px={4}
  borderWidth="1px"
  borderColor="blue.500"
  rounded="md"
  _hover={{ bg: "blue.500", color: " white" }}
  _focus={{ boxShadow: "outline" }}
>
  Hover me
</PseudoBox>

Editable Example

Focus#

Add the _focus prop to only apply a styles on focus.

<PseudoBox
  as="input"
  placeholder="Focus me"
  py={2}
  px={4}
  bg="gray.200"
  color="gray.900"
  borderColor="transparent"
  borderWidth="2px"
  rounded="md"
  _focus={{ bg: "white", borderColor: "blue.400" }}
/>

<PseudoBox
  as="input"
  placeholder="Focus me"
  py={2}
  px={4}
  bg="gray.200"
  color="gray.900"
  borderColor="transparent"
  borderWidth="2px"
  rounded="md"
  _focus={{ bg: "white", borderColor: "blue.400" }}
/>

Editable Example

Active#

Add the _active prop to only apply a styles on active.

<PseudoBox
  as="button"
  fontWeight="semibold"
  py={2}
  px={4}
  rounded="md"
  color="white"
  bg="blue.500"
  _active={{ bg: "blue.700" }}
  _focus={{ boxShadow: "outline" }}
>
  Click me
</PseudoBox>

<PseudoBox
  as="button"
  fontWeight="semibold"
  py={2}
  px={4}
  rounded="md"
  color="white"
  bg="blue.500"
  _active={{ bg: "blue.700" }}
  _focus={{ boxShadow: "outline" }}
>
  Click me
</PseudoBox>

Editable Example

Disabled#

Add the _disabled prop to style an element when it is disabled. This style will apply when the disabled or aria-disabled attribute of an element is set to true

<Stack isInline>
  <PseudoBox
    as="button"
    fontWeight="semibold"
    py={2}
    px={4}
    rounded="md"
    color="white"
    bg="blue.500"
    _active={{ bg: "blue.700" }}
    _focus={{ boxShadow: "outline" }}
  >
    Click me
  </PseudoBox>

  <PseudoBox
    as="button"
    disabled
    fontWeight="semibold"
    py={2}
    px={4}
    rounded="md"
    color="white"
    bg="blue.500"
    _active={{ bg: "blue.700" }}
    _focus={{ boxShadow: "outline" }}
    _disabled={{ opacity: 0.6 }}
  >
    Click me
  </PseudoBox>
</Stack>

<Stack isInline>
  <PseudoBox
    as="button"
    fontWeight="semibold"
    py={2}
    px={4}
    rounded="md"
    color="white"
    bg="blue.500"
    _active={{ bg: "blue.700" }}
    _focus={{ boxShadow: "outline" }}
  >
    Click me
  </PseudoBox>
  <PseudoBox
    as="button"
    disabled
    fontWeight="semibold"
    py={2}
    px={4}
    rounded="md"
    color="white"
    bg="blue.500"
    _active={{ bg: "blue.700" }}
    _focus={{ boxShadow: "outline" }}
    _disabled={{ opacity: 0.6 }}
  >
    Click me
  </PseudoBox>
</Stack>

Editable Example

Visited#

Add the _visited props to style a link that has been visited.

Unvisited Link Visited Link

<Stack isInline>
  <PseudoBox
    as="a"
    href="/radio"
    color="blue.600"
    textDecoration="underline"
    fontWeight="semibold"
  >
    Unvisited Link
  </PseudoBox>
  <PseudoBox
    as="a"
    href="/pseudobox"
    color="blue.600"
    textDecoration="underline"
    fontWeight="semibold"
    _visited={{ color: "purple.600" }}
  >
    Visited Link
  </PseudoBox>
</Stack>

<Stack isInline>
  <PseudoBox
    as="a"
    href="/radio"
    color="blue.600"
    textDecoration="underline"
    fontWeight="semibold"
  >
    Unvisited Link
  </PseudoBox>
  <PseudoBox
    as="a"
    href="/pseudobox"
    color="blue.600"
    textDecoration="underline"
    fontWeight="semibold"
    _visited={{ color: "purple.600" }}
  >
    Visited Link
  </PseudoBox>
</Stack>

Editable Example

First Child#

Add the _first prefix to style an element when it is the first-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One

Two

Three

<Box borderWidth="1px" rounded="md">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox
      key={item}
      px={4}
      py={2}
      borderTopWidth="1px"
      _first={{ borderTopWidth: 0 }}
    >
      {item}
    </PseudoBox>
  ))}
</Box>

<Box borderWidth="1px" rounded="md">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox
      key={item}
      px={4}
      py={2}
      borderTopWidth="1px"
      _first={{ borderTopWidth: 0 }}
    >
      {item}
    </PseudoBox>
  ))}
</Box>

Editable Example

Last Child#

Add the _last prefix to style an element when it is the last-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One

Two

Three

<Box borderWidth="1px" rounded="md">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox
      key={item}
      px={4}
      py={2}
      borderBottomWidth="1px"
      _last={{ borderBottomWidth: 0 }}
    >
      {item}
    </PseudoBox>
  ))}
</Box>

<Box borderWidth="1px" rounded="md">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox
      key={item}
      px={4}
      py={2}
      borderBottomWidth="1px"
      _last={{ borderBottomWidth: 0 }}
    >
      {item}
    </PseudoBox>
  ))}
</Box>

Editable Example

Odd Child#

Add the _odd prop to style an element when it is the odd-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One

Two

Three

<Box borderWidth="1px" rounded="md" overflow="hidden">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox key={item} px={4} py={2} bg="white" _odd={{ bg: "gray.100" }}>
      {item}
    </PseudoBox>
  ))}
</Box>

<Box borderWidth="1px" rounded="md" overflow="hidden">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox key={item} px={4} py={2} bg="white" _odd={{ bg: "gray.100" }}>
      {item}
    </PseudoBox>
  ))}
</Box>

Editable Example

Even Child#

Add the _even prop to style an element when it is the even-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One

Two

Three

<Box borderWidth="1px" rounded="md" overflow="hidden">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox key={item} px={4} py={2} bg="white" _even={{ bg: "gray.100" }}>
      {item}
    </PseudoBox>
  ))}
</Box>

<Box borderWidth="1px" rounded="md" overflow="hidden">
  {["One", "Two", "Three"].map(item => (
    <PseudoBox key={item} px={4} py={2} bg="white" _even={{ bg: "gray.100" }}>
      {item}
    </PseudoBox>
  ))}
</Box>

Editable Example

Group Hover#

If you need to style a child element when hovering over a specific parent element, add the role="group" attribute to the parent element, then you can use _groupHover prop to style the child element.

New Project

Create a new project from a variety of starting templates.

<PseudoBox
  role="group"
  maxW="sm"
  overflow="hidden"
  rounded="md"
  p={5}
  cursor="pointer"
  bg="white"
  boxShadow="md"
  _hover={{ bg: "blue.500" }}
>
  <PseudoBox
    fontWeight="semibold"
    fontSize="lg"
    mb={1}
    color="gray.900"
    _groupHover={{ color: "white" }}
  >
    New Project
  </PseudoBox>
  <PseudoBox color="gray.700" mb={2} _groupHover={{ color: "white" }}>
    Create a new project from a variety of starting templates.
  </PseudoBox>
</PseudoBox>

<PseudoBox
  role="group"
  maxW="sm"
  overflow="hidden"
  rounded="md"
  p={5}
  cursor="pointer"
  bg="white"
  boxShadow="md"
  _hover={{ bg: "blue.500" }}
>
  <PseudoBox
    fontWeight="semibold"
    fontSize="lg"
    mb={1}
    color="gray.900"
    _groupHover={{ color: "white" }}
  >
    New Project
  </PseudoBox>
  <PseudoBox color="gray.700" mb={2} _groupHover={{ color: "white" }}>
    Create a new project from a variety of starting templates.
  </PseudoBox>
</PseudoBox>

Editable Example

Selectors and Props#

PseudoBox can be used to style any interactive component. You can apply styles to the following selectors. The selectors are also ARIA-friendly to help you naturally use aria attributes for better accessibility.

All PseudoBox props can use the style props. Learn more about Style props

Selector	Prop
`&:hover`	`_hover`
`&:active`	`_active`
`&:focus`	`_focus`
`&:before`	`_before`
`&:after`	`_after`
`&::placeholder`	`_placeholder`
`&:first-of-type`	`_first`
`&:last-of-type`	`_last`
`[role=group]:hover &`	`_groupHover`
`&:disabled`, `[aria-disabled=true]`	`_disabled`
`&[readonly]`, `&[aria-readonly=true]`	`_readonly`
`&[aria-checked=true]`	`_checked`
`&[aria-selected=true]`	`_selected`
`&[aria-expanded=true]`	`_expanded`
`&[aria-invalid=true]`	`_invalid`
`&[aria-pressed=true]`	`_pressed`
`&[aria-invalid=true]`	`_invalid`
`&[aria-grabbed=true]`	`_grabbed`

Proudly made in 🇳🇬

Released under the MIT License.

PseudoBox

.css-12m0k8p{pointer-events:auto;}Usage.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Hover#

Focus#

Active#

Disabled#

Visited#

First Child#

Last Child#

Odd Child#

Even Child#

Group Hover#

Selectors and Props#

Usage#