shape-morphAvailable Shapes
All 35 built-in Material Design 3 shapes.
The library ships 35 preset shapes from the Material Design 3 shape system. Use any of these names with getShape(), <Shape>, useMorph, or useShape.
Shape names
Circle
Square
Slanted
Arch
Fan
Arrow
SemiCircle
Oval
Pill
Triangle
Diamond
ClamShell
Pentagon
Gem
Sunny
VerySunny
Cookie4Sided
Cookie6Sided
Cookie7Sided
Cookie9Sided
Cookie12Sided
Ghostish
Clover4Leaf
Clover8Leaf
Burst
SoftBurst
Boom
SoftBoom
Flower
Puffy
PuffyDiamond
PixelCircle
PixelTriangle
Bun
Heart
Usage
import { getShape, shapeNames } from "shape-morph";
// Get a specific shape
const heart = getShape("Heart");
// Iterate all shape names
for (const name of shapeNames) {
const shape = getShape(name);
}import { Shape } from "shape-morph/react";
<Shape name="Cookie9Sided" size={48} fill="#6750A4" />All shape names are available as the ShapeName type for TypeScript autocomplete:
import type { ShapeName } from "shape-morph";
// or
import type { ShapeName } from "shape-morph/react";