Overview of the Shape Component

The Shape component clips its content to a chosen geometric outline. Available shapes: squircle , circle , square , heart , star , star_alt , diamond , pentagon , hexagon , hexagon_alt , decagon , triangle , triangle_down , triangle_left , triangle_right .

Basic usage with image

RTL LTR

squircle

circle

hexagon

heart

star

diamond

squircle

circle

hexagon

heart

star

diamond

<.shape variant="squircle" src="/avatar.jpg" alt="User avatar" />

All 15 shapes

<.shape :for={shape <- @shapes} variant={shape} size="medium" src="..." />

Sizes

<.shape variant="circle" size="extra_small" src="..." />
<.shape variant="circle" size="small" src="..." />
<.shape variant="circle" size="medium" src="..." />
<.shape variant="circle" size="large" src="..." />
<.shape variant="circle" size="extra_large" src="..." />

Half mode

Use half="first" or half="second" to render only half of the shape — useful for split / hover reveals.

<.shape variant="hexagon" half="first" src="..." />
<.shape variant="hexagon" half="second" src="..." />

Custom content (slot)

Skip src and pass a slot to clip any HEEx content (gradients, video, avatar initials, etc.) to the shape.

<.shape variant="hexagon" size="large">
  <div class="bg-gradient-to-br from-primary-light to-primary-dark size-full
              flex items-center justify-center text-white">
    AB
  </div>
</.shape>