Line

Draws a straight line between two endpoints in local coordinates. Suitable for indicator lines, ticks and dividers, you can set the color, width, dash and endpoint styles.

Example

function main() {
  return (
    <Line
      start={{ x: 0, y: 20 }}
      end={{ x: 160, y: 60 }}
      stroke={$env.accent}
      lineWidth={4}
      lineCap="round"
    />
  );
}

Usage

start/end use local coordinates: origin at top left, x right, y down. Fixed endpoints do not scale when width/height changes. Compute endpoints from available dimensions for responsive lines. Line has no fillable interior.
Layout reserves space before x/y and transform are applied. Moving a child right by 20 points does not push its siblings away; use spacing or Spacer to change gaps. Rotation and scaling affect the completed View.

Properties

start?ViewPoint

Line endpoint in local point coordinates; x increases right and y down.

Example{x: 0, y: 0}

end?ViewPoint

Line endpoint in local point coordinates; x increases right and y down.

Example{x: 100, y: 80}

stroke?Paint

Stroke paint; accepts a color or gradient. Use clear to hide the stroke.

ExampleHDR($env.dark ? "white" : "black")

lineWidth?number

Stroke thickness in points; 0 draws no stroke.

Example2

lineCap?"round" | "butt" | "square"

Stroke end shape: butt stops at the endpoint, square extends it, round rounds it.

Example"round"

dash?number[]

Alternating painted and empty lengths in points; an empty array makes a solid stroke.

Example[]

dashPhase?number

Offset along the dash pattern, in points.

Example0

trimStart?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example0

trimEnd?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example1

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <Line
      width={$env.width}
      height={40}
      start={{ x: 0, y: 20 }}
      end={{ x: $env.width, y: 20 }}
      stroke={$env.accent}
      lineWidth={3}
      dash={[8, 4]}
      dashPhase={0}
    />
  );
}

Animation

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.y

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`lineWidth`	`2`
`lineCap`	`"round"`
`trimStart`	`0`
`trimEnd`	`1`
`dash`	`[]`
`dashPhase`	`0`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Example

Usage

Properties

Practical example

Animation

When omitted

Polyline

Path

Color / Gradient

On this page

Line

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

Polyline

Path

Color / Gradient

On this page