Styles

Every Forme component accepts a style prop with CSS-like properties. Styles are passed as a JavaScript object.

<View style={{ flexDirection: 'row', gap: 12, padding: 16, backgroundColor: '#f8fafc' }}>
  <Text style={{ fontSize: 14, fontWeight: 700, color: '#1e293b' }}>Hello</Text>
</View>

Prefer Tailwind syntax? Use @formepdf/tailwind to write tw("flex-row gap-3 p-4 bg-slate-50") instead of style objects.

Layout

Property	Type	Default	Description
`width`	`number \| string`	auto	Element width in points, or a percentage string (e.g., `"50%"`)
`height`	`number \| string`	auto	Element height in points, or a percentage string
`minWidth`	`number \| string`	-	Minimum width
`minHeight`	`number \| string`	-	Minimum height
`maxWidth`	`number \| string`	-	Maximum width
`maxHeight`	`number \| string`	-	Maximum height
`flexDirection`	`"column"` \| `"row"` \| `"column-reverse"` \| `"row-reverse"`	`"column"`	Direction of flex layout
`flexGrow`	`number`	`0`	How much this element grows to fill available space
`flexShrink`	`number`	`1`	How much this element shrinks when space is tight
`flexBasis`	`number \| string`	auto	Initial size before growing/shrinking
`flexWrap`	`"nowrap"` \| `"wrap"` \| `"wrap-reverse"`	`"nowrap"`	Whether children wrap to new lines
`justifyContent`	`"flex-start"` \| `"flex-end"` \| `"center"` \| `"space-between"` \| `"space-around"` \| `"space-evenly"`	`"flex-start"`	Alignment along the main axis
`alignItems`	`"flex-start"` \| `"flex-end"` \| `"center"` \| `"stretch"` \| `"baseline"`	`"stretch"`	Alignment along the cross axis
`alignSelf`	`"flex-start"` \| `"flex-end"` \| `"center"` \| `"stretch"` \| `"baseline"`	-	Override parent’s `alignItems` for this element
`alignContent`	`"flex-start"` \| `"flex-end"` \| `"center"` \| `"space-between"` \| `"space-around"` \| `"space-evenly"` \| `"stretch"`	`"flex-start"`	Distribution of wrapped lines along the cross axis. Only applies when `flexWrap` is `"wrap"` and the container has a fixed `height`.
`gap`	`number`	`0`	Space between children (both row and column gap)
`rowGap`	`number`	-	Space between rows (overrides `gap` for row direction)
`columnGap`	`number`	-	Space between columns (overrides `gap` for column direction)

Layout examples

{/* Centered content */}
<View style={{ justifyContent: 'center', alignItems: 'center', height: 200 }}>
  <Text>Centered</Text>
</View>

{/* Row with space between */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

{/* Equal-width columns */}
<View style={{ flexDirection: 'row', gap: 16 }}>
  <View style={{ flexGrow: 1 }}><Text>Column 1</Text></View>
  <View style={{ flexGrow: 1 }}><Text>Column 2</Text></View>
  <View style={{ flexGrow: 1 }}><Text>Column 3</Text></View>
</View>

{/* Wrapped items with centered lines */}
<View style={{ flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', height: 200, gap: 8 }}>
  <View style={{ width: 80, height: 40, backgroundColor: '#dbeafe' }}><Text>A</Text></View>
  <View style={{ width: 80, height: 40, backgroundColor: '#dbeafe' }}><Text>B</Text></View>
  <View style={{ width: 80, height: 40, backgroundColor: '#dbeafe' }}><Text>C</Text></View>
</View>

Spacing

Property	Type	Default	Description
`padding`	`number \| { top, right, bottom, left }`	`0`	Inner spacing. A single number applies to all sides.
`margin`	`number \| { top, right, bottom, left }`	`0`	Outer spacing. A single number applies to all sides.

Margins in Forme are always additive (like flexbox gap). There is no CSS margin collapsing.

Spacing examples

{/* Uniform padding */}
<View style={{ padding: 16 }}>
  <Text>16pt padding on all sides</Text>
</View>

{/* Per-side margin */}
<View style={{ margin: { top: 24, right: 0, bottom: 12, left: 0 } }}>
  <Text>Different top and bottom margins</Text>
</View>

Typography

Property	Type	Default	Description
`fontSize`	`number`	`12`	Font size in points
`fontFamily`	`string`	`"Helvetica"`	Font family name. Standard PDF fonts: Helvetica, Times, Courier. Register custom TTF fonts with `Font.register()`.
`fontWeight`	`number \| "normal" \| "bold"`	`"normal"`	Font weight. Numeric values (100-900) or keywords.
`fontStyle`	`"normal"` \| `"italic"` \| `"oblique"`	`"normal"`	Italic or oblique text
`lineHeight`	`number`	`1.2`	Line height as a multiplier of font size
`textAlign`	`"left"` \| `"center"` \| `"right"` \| `"justify"`	`"left"`	Horizontal text alignment
`letterSpacing`	`number`	`0`	Extra space between characters in points
`wordSpacing`	`number`	`0`	Extra space between words in points (PDF `Tw` operator — affects ASCII spaces). Stacks additively with `text-align: justify` slack
`textDecoration`	`"none"` \| `"underline"` \| `"line-through"`	`"none"`	Text decoration
`textTransform`	`"none"` \| `"uppercase"` \| `"lowercase"` \| `"capitalize"`	`"none"`	Text case transformation

Typography examples

{/* Heading */}
<Text style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.5 }}>
  Large Heading
</Text>

{/* Body text */}
<Text style={{ fontSize: 10, lineHeight: 1.6, color: '#475569' }}>
  Body text with comfortable line height for readability.
</Text>

{/* Label */}
<Text style={{ fontSize: 8, textTransform: 'uppercase', letterSpacing: 1, color: '#94a3b8' }}>
  Section Label
</Text>

Background and Border

Property	Type	Default	Description
`color`	`string`	`"#000000"`	Text color. Hex string (e.g., `"#1e293b"`).
`backgroundColor`	`string`	-	Background fill color
`background`	`string`	-	CSS gradient or solid color string. Linear: `"linear-gradient(135deg, #667eea, #764ba2)"`. Radial: `"radial-gradient(circle, #10b981, #059669)"`. Multi-stop supported. Solid colors fall through to `backgroundColor`.
`opacity`	`number`	`1.0`	Element opacity (0.0 to 1.0). Cascades to children — nested opacities multiply.
`boxShadow`	`{ offsetX, offsetY, blur, color }` or `string`	-	Offset drop shadow behind the element. String form: `"2 4 0 #00000033"`. Honors `borderRadius`. `blur` is parsed but rendered sharp in this release.
`borderWidth`	`number \| { top, right, bottom, left }`	`0`	Border width in points. A single number applies to all sides.
`borderColor`	`string \| { top, right, bottom, left }`	`"#000000"`	Border color. A single string applies to all sides.
`borderRadius`	`number \| { topLeft, topRight, bottomRight, bottomLeft }`	`0`	Corner radius in points. A single number applies to all corners. Also rounds the clip path when `overflow: 'hidden'`.

Background and border examples

{/* Card with rounded corners */}
<View style={{ padding: 16, backgroundColor: '#f8fafc', borderRadius: 8, borderWidth: 1, borderColor: '#e2e8f0' }}>
  <Text>Card content</Text>
</View>

{/* Bottom border only (like an underline) */}
<View style={{ paddingBottom: 8, borderWidth: { top: 0, right: 0, bottom: 1, left: 0 }, borderColor: '#e2e8f0' }}>
  <Text>Underlined section</Text>
</View>

{/* Accent left border */}
<View style={{ paddingLeft: 12, borderWidth: { top: 0, right: 0, bottom: 0, left: 3 }, borderColor: '#2563eb' }}>
  <Text>Highlighted note</Text>
</View>

Positioning

Property	Type	Default	Description
`position`	`"relative"` \| `"absolute"`	`"relative"`	Positioning mode. Absolute positioning places the element relative to its parent’s content box.
`top`	`number`	-	Offset from the top of the parent’s padding edge (absolute positioning)
`right`	`number`	-	Offset from the right of the parent’s padding edge (absolute positioning)
`bottom`	`number`	-	Offset from the bottom of the parent’s padding edge (absolute positioning)
`left`	`number`	-	Offset from the left of the parent’s padding edge (absolute positioning)

Positioning examples

{/* Badge overlay in the top-right corner */}
<View style={{ width: 200, height: 100, backgroundColor: '#f8fafc' }}>
  <Text>Product Card</Text>
  <View style={{ position: 'absolute', top: 4, right: 4, padding: 4, backgroundColor: '#ef4444', borderRadius: 4 }}>
    <Text style={{ fontSize: 8, color: '#ffffff', fontWeight: 700 }}>NEW</Text>
  </View>
</View>

{/* Watermark-style overlay */}
<View style={{ width: '100%', height: 400 }}>
  <Text>Document content here...</Text>
  <View style={{ position: 'absolute', top: 160, left: 100 }}>
    <Text style={{ fontSize: 48, color: '#e2e8f0', fontWeight: 700 }}>DRAFT</Text>
  </View>
</View>

Page Behavior

Property	Type	Default	Description
`wrap`	`boolean`	`true`	Whether this element can break across pages. Set `false` to keep it on one page.
`breakBefore`	`boolean`	`false`	Force a page break before this element
`minWidowLines`	`number`	`2`	Minimum number of lines to keep at the top of a new page after a text break
`minOrphanLines`	`number`	`2`	Minimum number of lines to keep at the bottom of a page before a text break

Page behavior examples

{/* Non-breakable card */}
<View wrap={false} style={{ padding: 16, backgroundColor: '#f1f5f9' }}>
  <Text style={{ fontWeight: 700 }}>Summary</Text>
  <Text>This entire block stays on one page.</Text>
</View>

{/* Force a new page before a section */}
<View style={{ breakBefore: true }}>
  <Text style={{ fontSize: 20, fontWeight: 700 }}>Chapter 2</Text>
</View>

{/* Keep at least 3 lines together at top and bottom of page breaks */}
<Text style={{ minWidowLines: 3, minOrphanLines: 3 }}>
  Long paragraph text that might split across pages...
</Text>

Style Inheritance

Some properties are inherited from parent elements, matching CSS behavior: Inherited: color, fontFamily, fontSize, fontWeight, fontStyle, lineHeight, textAlign, letterSpacing Not inherited: width, height, padding, margin, backgroundColor, borderWidth, borderColor, borderRadius, flexDirection, gap, opacity

{/* fontSize and color are inherited by child Text elements */}
<View style={{ fontSize: 10, color: '#475569' }}>
  <Text>This text is 10pt and gray.</Text>
  <Text style={{ fontWeight: 700 }}>This text is also 10pt and gray, but bold.</Text>
</View>

Getting Started

Reference

API Reference

Concepts

Enterprise

SDKs

Guides

Changelog

Layout

Layout examples

Spacing

Spacing examples

Typography

Typography examples

Background and Border

Background and border examples

Positioning

Positioning examples

Page Behavior

Page behavior examples

Style Inheritance

​Layout

​Layout examples

​Spacing

​Spacing examples

​Typography

​Typography examples

​Background and Border

​Background and border examples

​Positioning

​Positioning examples

​Page Behavior

​Page behavior examples

​Style Inheritance

Layout

Layout examples

Spacing

Spacing examples

Typography

Typography examples

Background and Border

Background and border examples

Positioning

Positioning examples

Page Behavior

Page behavior examples

Style Inheritance