Gradient Border

Renders a Flex component with a background image that plays the role of a gradient border.

Import#

import { GradientBorder } from "/components/GradientBorder/GradientBorder.js"

Usage#

<Flex
  p="2px"
  justify="center"
  align="center"
  width="100px"
  height="100px"
  bg="radial-gradient(69.43% 69.43% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)"
>
  <Box w="100%" h="100%" bg="black"></Box>
</Flex>

function Example() {
  return (
    <GradientBorder w="100px" h="100px">
      <Box w="100%" h="100%" bg="black"></Box>
    </GradientBorder>
  )
}

GradientBorder Props#

GradientBorder composes the Flex component.

`align`

Description

Shorthand for alignItems style prop

Type

SystemProps["alignItems"]

`basis`

Description

Shorthand for flexBasis style prop

Type

SystemProps["flexBasis"]

`direction`

Description

Shorthand for flexDirection style prop

Type

SystemProps["flexDirection"]

`grow`

Description

Shorthand for flexGrow style prop

Type

SystemProps["flexGrow"]

`justify`

Description

Shorthand for justifyContent style prop

Type

SystemProps["justifyContent"]

`shrink`

Description

Shorthand for flexShrink style prop

Type

SystemProps["flexShrink"]

`wrap`

Description

Shorthand for flexWrap style prop

Type

SystemProps["flexWrap"]