Box

The base component in Minerva UI, can be used to replace a <div> or any other element by using the as prop.

import { Box } from 'minera-ui';

Box Component
Span Component
<Box>
  <Box>Box Component</Box>
  <Box as="span">Span Component</Box>
</Box>
<Box>
  <Box>Box Component</Box>
  <Box as="span">Span Component</Box>
</Box>

Pseudo Props

Pseudo selectors (prefaced by _) can also be used to style the component.


<Box
  as={Input}
  placeholder="Focus me"
  py={2}
  px={4}
  bg="gray.200"
  color="gray.900"
  borderColor="transparent"
  borderWidth="2px"
  rounded="md"
  outline="none"
  _focus={{ bg: 'purple.300', border: '1px solid purple' }}
/>
<Box
  as={Input}
  placeholder="Focus me"
  py={2}
  px={4}
  bg="gray.200"
  color="gray.900"
  borderColor="transparent"
  borderWidth="2px"
  rounded="md"
  outline="none"
  _focus={{ bg: 'purple.300', border: '1px solid purple' }}
/>

These are pseudo class props for the Box component.

Prop	Selector
`_after`	`&:after`
`_before`	`&:before`
`_hover`	`&:hover`
`_focus`	`&:focus`
`_active`	`&:active`, `&[data-active=true]`
`_visited`	`&:visited`
`_pressed`	`&:pressed`
`_checked`	`&[aria-checked=true]`
`_mixed`	`&[aria-checked=mixed]`
`_selected`	`&[aria-selected=true]`
`_disabled`	`&:disabled,` `&:disabled:focus`,`&:disabled:hover`, `&[aria-disabled=true]`, `&[aria-disabled=true]:focus`, `&[aria-disabled=true]:hover`
`_invalid`	`&[aria-invalid=true]`
`readOnly`	`&[aria-readonly=true]` `&[readonly]`
`_even`	`&:nth-of-type(even)`
`_odd`	`&:nth-of-type(odd)`
`_first`	`&:first-of-type`
`_last`	`&:last-of-type`
`_expanded`	`&[aria-expanded=true]`
`_grabbed`	`&[aria-grabbed=true]`
`_groupHover`	`[role=group]:hover &`
`_notFirst`	`&:not(:first-of-type)`
`_notLast`	`&:not(:last-of-type)`
`_focusWithin`	`&:focus-within`
`_placeholder`	`&::placeholder`

Box

Pseudo Props#

Pseudo Props