# Paragraph
Use this to display a block of text similar to the `<p>` tag in HTML.
### Simple Paragraph example

```tsx
import {
    render,
    BlockStack,
    Paragraph,
} from '@shopify/ui-extensions-react/admin';

render('Playground', () =&gt; &lt;App /&gt;);

function App() {
    return (
        &lt;BlockStack inlineAlignment='center' gap&gt;
            &lt;Paragraph fontWeight='bold'&gt;Name:&lt;/Paragraph&gt;
            &lt;Paragraph&gt;Jane Doe&lt;/Paragraph&gt;
        &lt;/BlockStack&gt;
    )
}

```

```js
import {extend, Paragraph, BlockStack} from '@shopify/ui-extensions/admin';

extend('Playground', (root) =&gt; {
  const paragraph = root.createComponent(BlockStack, {inlineAlignment: 'center', gap: true}, [
    root.createComponent(Paragraph, {fontWeight: 'bold'}, 'Name:'),
    root.createComponent(Paragraph, {}, 'Jane Doe'),
  ]);

  root.appendChild(paragraph);
});

```


## ParagraphProps

### ParagraphProps

### children

### fontSize
Size of the typography's font.
### fontStyle
Use to emphasize a word or a group of words.
### fontWeight
Sets the weight of the font.
### id
A unique identifier for the element.
### textOverflow
Set how hidden overflow content is signaled to users.
### SizeScale

'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'
### FontStyle

'italic' | 'normal'
### FontWeight

'light-300' | 'light-200' | 'light-100' | 'light' | 'base' | 'normal' | 'bold' | 'bold-100' | 'bold-200' | 'bold-300'
### TextOverflow

'ellipsis'
## Related
- [Heading](/docs/api/admin-extensions/components/titles-and-text/heading)