WUI logo

Shape

The Shape component is a versatile UI element used to create and display geometric shapes such as circles, squares, rectangles, and more with an overflow on child elements.

Source@welcome-ui/shape
OverviewProps
import * as React from 'react'
import { Shape } from '@welcome-ui/shape'


const Example = () => {
  return (
    <Shape h="150px" w="150px">
      <img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
    </Shape>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/shape
2

Import component:

import { Shape } from '@welcome-ui/shape'

Examples

Add w and h to set size of shape.

Border radius

Add borderRadius from theme or what you want.

Shape

Set shape to square or circle, also, using shape with unequal sizes will match the biggest value between width / height.

LoaderStack