Skip to main content
Horizontal tab character for spacing. 
<Paragraph>
  Name:<Tab />John Doe
</Paragraph>

​
Usage

Adds a tab stop within text: 
<Paragraph>
  Email:<Tab />[email protected]
</Paragraph>
<Paragraph>
  Phone:<Tab />555-1234
</Paragraph>

​
Simple alignment

<Paragraph>
  Item<Tab />Qty<Tab />Price
</Paragraph>
<Paragraph>
  Widget<Tab />10<Tab />$5.00
</Paragraph>
<Paragraph>
  Gadget<Tab />5<Tab />$12.00
</Paragraph>
For complex alignment, use tables instead.

​
Common patterns

​
Label-value pairs

<Paragraph>
  <Text className="font-bold">Name:</Text><Tab />John Doe
</Paragraph>
<Paragraph>
  <Text className="font-bold">Title:</Text><Tab />Software Engineer
</Paragraph>
<Paragraph>
  <Text className="font-bold">Department:</Text><Tab />Engineering
</Paragraph>

​
Form fields

<Paragraph>
  Name:<Tab /><Tab />_______________________
</Paragraph>
<Paragraph>
  Date:<Tab /><Tab />_______________________
</Paragraph>
<Paragraph>
  Signature:<Tab />_______________________
</Paragraph>

​
Table of contents style

<Paragraph>
  Introduction<Tab />.<Tab />.<Tab />.<Tab />1
</Paragraph>
<Paragraph>
  Chapter 1<Tab />.<Tab />.<Tab />.<Tab />5
</Paragraph>
Use TableOfContents component for actual TOCs.

​
Code-like formatting

<Paragraph className="font-mono">
  const name<Tab />= "John";
</Paragraph>
<Paragraph className="font-mono">
  const age<Tab /><Tab />= 30;
</Paragraph>