Skip to main content

Interface: ShapeOptions

Configuration options for the Shape and Card components.

Extends​

Properties​

PropertyTypeDescription
align?Align-
background?stringBackground fill color.
blur?numberBlur in virtual pixels (default: 0).
borderColor?stringBorder stroke color.
brightness?numberBrightness multiplier (default: 1).
children?ElementChildOptional child elements or text nodes.
className?string-
color?stringForeground CSS color (default: component/theme color).
customPositioned?booleanWhether this element manages its own CSS transform / positioning (disables stage translate3d).
doubleBorder?booleanDouble border outline (e.g. for final states, nested rings).
end?numberTrim-path end offset from 0.0 to 1.0 (default: 1).
enterDelay?numberDelay in seconds before entering scene transition begins.
enterDuration?numberDuration in seconds for entering scene transition.
exitDelay?numberDelay in seconds before exiting scene transition begins.
exitDuration?numberDuration in seconds for exiting scene transition.
flow?FlowEffectContinuous ambient stroke animation ("none"
height?SizeHeight in stage units or CSS length (default: content size).
highlighted?booleanGlowing outline highlight (default: false).
id?string-
onActivate?() => void-
onDeactivate?() => void-
onMount?() => void-
onUnmount?() => void-
opacity?numberWhole-element opacity from 0 to 1 (default: 1).
origin?ElementAnchorWhich point of the element sits on its coordinate (default: "top-left").
position?Position-
rotation?numberRotation in degrees (default: 0).
scale?numberScale multiplier (default: 1).
size?SizeBoth dimensions in stage units or CSS length (default: unset).
start?numberTrim-path start offset from 0.0 to 1.0 (default: 0).
strokeWidth?numberStroke outline width in virtual canvas pixels (default: 2).
style?Properties<0 | string & object, string & object>-
text?stringOptional text content inside the shape container.
theme?Partial<ThemeConfig>-
variant?ShapeVariantSurface material preset: "surface" (background fill, default), "ghost" (outline), or "solid" (opaque fill).
width?SizeWidth in stage units or CSS length (default: content size).
x?PositionCoordHorizontal position in stage units (default: 0).
y?PositionCoordVertical position in stage units (default: 0).