linkOverview

The Shape component is a versatile UI element that allows to add premade shapes. It can be used to enhance visual design or draw attention to specific areas of the interface.

linkUsage

The Shape component can be used almost everywhere. For example, it can be used to create decorative elements, highlight important information, or simply add visual interest to a element. You just need to put the Shape component inside another component, such as a FAB, or any other container.

linkVariants

The Shape component has several variants to fit different design contexts.

linkAPI Reference

linkShape Components

A collection of decorative shape components that apply clip-path styling to their parent containers.

linkAvailable Shapes

The shape library includes 37 different shapes, each as a separate component:

Geometric Shapes:

• ShapeCircle - Perfect circle
• ShapeSquare - Square with rounded corners
• ShapeTriangle - Triangular shape
• ShapeDiamond - Diamond/rhombus shape
• ShapeHexagon - Six-sided polygon
• ShapePentagon - Five-sided polygon
• ShapeOval - Elliptical shape

Decorative Shapes:

• ShapeHeart - Heart shape
• ShapeFlower - Flower-like shape
• ShapeGem - Gem/crystal shape
• ShapeBurst - Star burst pattern
• ShapeBoom - Explosion-like shape
• ShapeFan - Fan or shell shape
• ShapeArrow - Arrow pointing shape

Cookie Shapes:

• Shape4SidedCookie - Four-sided cookie cutter
• Shape6SidedCookie - Six-sided cookie cutter
• Shape7SidedCookie - Seven-sided cookie cutter
• Shape9SidedCookie - Nine-sided cookie cutter
• Shape12SidedCookie - Twelve-sided cookie cutter

Special Shapes:

• ShapePixelCircle - Pixelated circle
• ShapePixelTriangle - Pixelated triangle
• ShapeGhostIsh - Ghost-like shape
• ShapePill - Pill/capsule shape
• ShapeArch - Arch or dome shape
• ShapeBun - Bun or rounded shape
• ShapeSlanted - Slanted/diagonal shape
• ShapeSemicircle - Half circle
• ShapePuffy - Puffy cloud-like shape
• ShapePuffyDiamond - Puffy diamond variant
• ShapeSoftBoom - Soft explosion shape
• ShapeSoftBurst - Soft burst pattern
• ShapeSunny - Sun-like shape
• ShapeVerySunny - Enhanced sun shape
• Shape4LeafClover - Four-leaf clover
• Shape8LeafClover - Eight-leaf clover

linkProps

The Shape component doesn't define any custom props beyond the standard input props.

linkInherited Props

The Radio component accepts all standard HTML svg element props.

linkUsage Pattern

Shape components work by automatically applying a clip-path CSS property to their parent container. They render as invisible SVG elements that define the clipping region.