Style Props

import { Box } from "@chakra-ui/react"

// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>

// You can also use custom values
<Box maxW="960px" mx="auto" />

// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

import { Box } from "@chakra-ui/react"

// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />

// raw CSS color value
<Box color='#f00' />

// background colors
<Box bg='tomato' />

// verbose prop
<Box backgroundColor='tomato' />

import { Box, Text } from "@chakra-ui/react"

// adding linear gradient and color transitions
<Box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />

// adding radial gradient and color transitions
<Box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />

// adding the text gradient
<Text
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
  fontSize="6xl"
  fontWeight="extrabold"
>
  Welcome to Chakra UI
</Text>

import { Text } from "@chakra-ui/react"

// font-size of `theme.fontSizes.md`
<Text fontSize="md" />

// font-size `32px`
<Text fontSize={32} />

// font-size `'2em'`
<Text fontSize='2em' />

// text-align `left` on all viewports and `center` from the first breakpoint and up
<Text textAlign={[ 'left', 'center' ]} />

import { Box } from "@chakra-ui/react"

// verbose
<Box width="100%" height={32} />

// shorthand
<Box w="100%" h="32px" />

// use theme sizing
<Box boxSize="sm" />

// width `50%`
<Box w={1/2} />

// width `256px`
<Box w={256} />

// width `'40px'`
<Box w='40px' />

import { Box, Flex } from "@chakra-ui/react"

// 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>

import { Box, Grid } from "@chakra-ui/react"

// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
  Grid
</Box>

// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

import { Box } from "@chakra-ui/react"

// verbose
<Box
  backgroundImage="url('/images/kyuubi.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>

// shorthand
<Box
  bgImage="url('/images/gaara.png')"
  bgPosition="center"
  bgRepeat="no-repeat"
/>

<Box border="1px" borderColor="gray.200">
  Card
</Box>

import { Button } from "@chakra-ui/react"

// 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.radii.md` => 4px
<Button borderTopRadius="md">Button 2</Button>

import { Box } from "@chakra-ui/react"

// 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>

<SimpleGrid
  bg="gray.50"
  columns={{ sm: 2, md: 4 }}
  spacing="8"
  p="10"
  textAlign="center"
  rounded="lg"
  color="gray.400"
>
  <Box boxShadow="xs" p="6" rounded="md" bg="white">
    xs
  </Box>
  <Box boxShadow="sm" p="6" rounded="md" bg="white">
    sm
  </Box>
  <Box boxShadow="base" p="6" rounded="md" bg="white">
    Base
  </Box>
  <Box boxShadow="md" p="6" rounded="md" bg="white">
    md
  </Box>
  <Box boxShadow="lg" p="6" rounded="md" bg="white">
    lg
  </Box>
  <Box boxShadow="xl" p="6" rounded="md" bg="white">
    xl
  </Box>
  <Box boxShadow="2xl" p="6" rounded="md" bg="white">
    2xl
  </Box>
  <Box boxShadow="dark-lg" p="6" rounded="md" bg="white">
    Dark lg
  </Box>
  <Box boxShadow="outline" p="6" rounded="md" bg="white">
    Outline
  </Box>
  <Box boxShadow="inner" p="6" rounded="md" bg="white">
    Inner
  </Box>
</SimpleGrid>

<Text textShadow="1px 1px #ff0000" m="6">
  Text with shadows
</Text>

import { Button } from "@chakra-ui/react"

// :hover style
<Button
  colorScheme="teal"
  _hover={{
    background: "white",
    color: "teal.500",
  }}
>
  Hover me
</Button>

// apply :hover over parent element
<Box
  role="group"
>
  <Box
    _hover={{ fontWeight: 'semibold' }}
    _groupHover={{ color: 'tomato' }}
  >
  </Box>
</Box>

<Button as="a" target="_blank" variant="outline" href="https://chakra-ui.com">
  Hello
</Button>