API and Development
Shape, ShapeStrokeAlignment, ShapeStrokeLinecap, ShapeStrokeLinejoin, ShapeStrokeWidth, toSvgPathData, and types ShapeLayer and SvgViewBox from @prepared911/ui/shape. Brand path data with toSvgPathData; use type SvgPathData for branded path values.className, style, or as. Consumers may pass data-* attributes the same way as on Image.| Name | Type | Default | Description |
|---|---|---|---|
label | LocalizedMessage | — | Accessible name; renders role="img" and aria-label. |
path | SvgPathData | — | Branded path data for the d attribute. |
viewBox | SvgViewBox | — | User-space view box; rendered as "minX minY width height". |
decorative | boolean | — | When omitted or false, the shape is meaningful and must supply label.
Marks the graphic as decorative. Renders aria-hidden="true" and focusable="false". |
fill | VectorPaint | — | Fill paint. Defaults to none when omitted. |
id | string | — | Element id forwarded to the svg. |
layers | readonly ShapeLayer[] | — | Extra paths drawn above the base path, in order, each with its own paint. |
nonScalingStroke | boolean | false | When true, stroke width stays constant in screen pixels (vector-effect: non-scaling-stroke on the base path). |
ref | Ref<SVGSVGElement> | — | Ref to the root svg. |
size | ShapeSize | — | Space-scale box for the root svg. |
stroke | VectorPaint | — | Stroke paint. Defaults to none when omitted. |
strokeAlignment | ShapeStrokeAlignment | ShapeStrokeAlignment.Center | Stroke alignment relative to the path. Inside and Outside are meaningful only for closed paths. |
strokeLinecap | ShapeStrokeLinecap | ShapeStrokeLinecap.Butt | Stroke end style of the base path. |
strokeLinejoin | ShapeStrokeLinejoin | ShapeStrokeLinejoin.Miter | Stroke corner style of the base path. |
strokeWidth | ShapeStrokeWidth | ShapeStrokeWidth.Hairline | Stroke width in viewBox user units. |
| Member | Value (user units) |
|---|---|
Hairline | 1 |
Thin | 2 |
Regular | 3 |
Thick | 4 |
| Member | Serialized value |
|---|---|
Center | center |
Inside | inside |
Outside | outside |
| Member | Serialized value |
|---|---|
Butt | butt |
Round | round |
Square | square |
| Member | Serialized value |
|---|---|
Miter | miter |
Round | round |
Bevel | bevel |
| Prop | Type | Description |
|---|---|---|
path | SvgPathData | Branded path data for the layer. |
fill | VectorPaint | Fill paint; none when omitted. |
stroke | VectorPaint | Stroke paint; none when omitted. |
strokeWidth | ShapeStrokeWidth | Stroke width in user units. Defaults to Hairline. |
strokeLinecap | ShapeStrokeLinecap | Stroke end style. Defaults to Butt. |
strokeLinejoin | ShapeStrokeLinejoin | Stroke corner style. Defaults to Miter. |
| Prop | Type | Description |
|---|---|---|
block | SpaceOption | Block size from the space scale; omitted keeps intrinsic block size. |
inline | SpaceOption | Inline size from the space scale; omitted keeps intrinsic inline size. |
Foreground token (except Inherit) | ChartColor | DataColor. Defaults to none when omitted.packages/ui/src/components/shape/shape.figma.ts. The set draws a sample closed path as two layers, Fill and Stroke, and exposes Show fill, Show stroke, Stroke width, Stroke alignment and Size as component properties. Stroke alignment uses Figma's native inside, center and outside stroke placement, and size steps use the space variables. Fill and stroke paint come from each layer's Text Foreground variable mode; ChartColor and DataColor paint, path, viewBox and the accessible name are code-only. See Figma Code Connect.