Skip to main content
Container for text content. The basic building block for document text. 
<Paragraph>Hello world</Paragraph>

​
Props

PropTypeDescription
childrenReactNodeText, formatting elements, links, images
classNamestringTailwind classes
idstringBookmark ID for internal links

​
Plain text

Strings are automatically converted to text runs: 
// These are equivalent
<Paragraph>Hello world</Paragraph>
<Paragraph><Text>Hello world</Text></Paragraph>
No need to wrap plain text in <Text>.

​
Mixed content

Combine text with formatting: 
<Paragraph>
  This is <Text className="font-bold">bold</Text> and this is
  <Text className="italic"> italic</Text>.
</Paragraph>
Or use formatting shortcuts: 
<Paragraph>
  This is <Bold>bold</Bold> and this is <Italic>italic</Italic>.
</Paragraph>

​
Styling

​
Alignment

<Paragraph className="text-left">Left aligned</Paragraph>
<Paragraph className="text-center">Centered</Paragraph>
<Paragraph className="text-right">Right aligned</Paragraph>
<Paragraph className="text-justify">Justified text</Paragraph>

​
Spacing

<Paragraph className="mt-4">Margin top</Paragraph>
<Paragraph className="mb-4">Margin bottom</Paragraph>
<Paragraph className="mt-8 mb-4">Both</Paragraph>

​
Indentation

<Paragraph className="indent-8">First line indent</Paragraph>
<Paragraph className="ml-8">Left indent (whole paragraph)</Paragraph>
<Paragraph className="mr-8">Right indent</Paragraph>

​
Line height

<Paragraph className="leading-tight">Tight line spacing</Paragraph>
<Paragraph className="leading-normal">Normal spacing</Paragraph>
<Paragraph className="leading-loose">Loose spacing</Paragraph>

​
Background

<Paragraph className="bg-yellow-100">Highlighted paragraph</Paragraph>

​
Special elements

​
Line breaks

<Paragraph>
  First line
  <BreakLine />
  Second line (same paragraph)
</Paragraph>

​
Tabs

<Paragraph>
  Name:<Tab />John Doe
</Paragraph>

​
Page breaks

<Paragraph>Content before</Paragraph>
<BreakPage />
<Paragraph>Content on new page</Paragraph>

<Paragraph>
  Visit <Link href="https://example.com">our website</Link> for more info.
</Paragraph>

​
Bookmarks

Use id to create an anchor for internal links: 
<Paragraph id="section-1">
  <H1>Introduction</H1>
</Paragraph>

{/* Later in the document */}
<Paragraph>
  See <Link href="#section-1">Introduction</Link>.
</Paragraph>

​
What can go inside

  • Plain strings (auto-wrapped)
  • Text with styling
  • Bold, Italic, Underline, Strike
  • Link
  • Image (inline)
  • Tab, BreakLine
  • Variable
  • PageNumber
What can’t go inside: other Paragraph elements, Table, H1-H6.