# Vertical line
[Full-page experience](/experience/vertical-line/) · [Open playground](/playground/#/examples/drawing/vertical-line)

Build dividers, ticks, and rhythm with a one-axis line helper.

## Try it

Move through the striped field and find each target.

## What to learn

- Draw a rule from top to bottom.
- Use optional bounds and pixel-grid alignment.

## Integration boundaries

- Omitted `top` or `bottom` values use the Canvas bounds.
- Event props and cursor styling work the same way as on `Line`.

This is a Pibbl Canvas example. Its mount owns its runtime resources; call its controller's dispose method when removing it. The preview starts automatically unless reduced motion is enabled; Stop disposes the mount. Preserve the source's logical canvas size and aspect ratio. Native HTML is not captured by Canvas filters.

## Related APIs

- [VerticalLine](/reference/components/vertical-line/)

## Complete source

Host setup for this source: use a canvas with width 720 and height 420, compile with `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`, import its default `mount`, and call `const controller = mount(canvas)` after attaching the canvas. Call `controller.dispose()` before removing it.

### vertical-line.example.tsx

```tsx
import {
  pibbl,
  useSignal,
  Rectangle,
  Text,
  VerticalLine,
  type PibblController,
} from "@pibbl/core";
function VerticalStudy() {
  const stripe = useSignal(0);
  const colors = ["#1f4bd8", "#ff6b57", "#f7c948", "#74d3ae"];
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7f0df",
      }}
    />,
    ...colors.map((color, index) => (
      <VerticalLine
        style={{
          x: 160 + index * 132,
          y1: 74 + index * 18,
          y2: 346 - index * 18,
          stroke: color,
          strokeWidth: stripe.get() === index + 1 ? 26 : 10,
          lineInteractionWidth: 40,
          alignToPixelGrid: "round",
          cursor: "col-resize",
        }}
        onMouseOver={() => stripe.set(index + 1)}
        onMouseOut={() => stripe.set(0)}
      />
    )),
    <Text
      style={{
        left: 360,
        top: 370,
        fill: "#17211d",
        font: "800 17px monospace",
        textAlign: "center",
      }}
    >
      {stripe.get() ? `STRIPE ${stripe.get()}` : "VERTICAL FIELD"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <VerticalStudy />);
}

```

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.