Layout & Structure
Divider
Simple line separator for spacing rhythm and clear boundaries between sections. Horizontal or vertical, three length presets, one colour - intentionally minimal with nothing to wire up.
Horizontal for section breaks, vertical for inline column separators.
Three presets map to fixed pixel values. Canvas drag bounds update to match.
Available on all plans.
Four things worth knowing
Intentionally minimal
Divider has no label, margin, or thickness controls. It renders a single 1 px line at the chosen length and colour. Keep it simple - if you need spacing with context, use a Heading or spacer block instead.
Length presets map to real pixels
sm = 80 px, md = 140 px, lg = 220 px. These values are defined in BuilderDivider.tsx and the canvas drag bounds in componentDimensions.ts match them - change one, update the other.
Orientation controls inner line, not container
Horizontal renders a line of height: 1 and width: 100%. Vertical renders a line of width: 1 and height: 100%. The outer container always centres the line so vertical stays narrow and doesn’t stretch full-width.
customWidth / customHeight override presets
The builder canvas and the runtime player both inject customWidth and customHeight at render time. These take priority over the preset length fallbacks - so the divider always fits the slot it was dropped into.
Find it, drop it, done
Where to find itAdd it to any screen
- Component picker → Layout → Divider.
- Drop it between any two sections.
- No navigation or data props to configure.
Before you publishThree things to check
- Set Orientation - horizontal for row breaks, vertical for column gaps.
- Pick a Length preset that matches the surrounding content width.
- Adjust Color if the default light grey doesn’t contrast enough against the screen background.
Orientation, length, and sizing
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | select | ’horizontal’ | horizontal - row separator. vertical - column separator. |
length | select | ’md’ | sm (80 px) · md (140 px) · lg (220 px). |
customWidth | number | - | Runtime width injected by the builder canvas and player. Overrides length preset. |
customHeight | number | - | Runtime height injected by the builder canvas and player. Overrides length preset. |
Make it yours
One colour control - adjust it to match the screen background or brand palette without touching anything else.
| Prop | Default | What it controls |
|---|---|---|
color | #E0E0E0 | Divider line colour. |
Common mistakes to avoid
sm / md / lg looks the same
Check componentDimensions.ts - the divider case must map length to different values. If a generic minimum clamp is flattening all sizes to one value, the presets will appear identical on canvas.
Vertical divider stretches full-width
The outer container in BuilderDivider.tsx must use alignItems: ‘center’ and the inner line must be width: 1. If it’s stretching, the container width constraint is missing.
Keep length map and dimensions in sync
The lengthMap in BuilderDivider.tsx and the divider case in componentDimensions.ts must match. Change one without the other and the canvas drag bounds won’t reflect the actual rendered size.
Looks different in the deployed app
The standalone deploy bundle must be kept in sync. After any rendering logic change, re-run node collectSourceFiles.js from the app/ directory to update bundledSourceFiles.ts.