# Paragraph

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

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

render('Playground', () => <App />);

function App() {
    return (
        <BlockStack inlineAlignment='center' gap>
            <Paragraph fontWeight='bold'>Name:</Paragraph>
            <Paragraph>Jane Doe</Paragraph>
        </BlockStack>
    )
}

```

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

extend('Playground', (root) => {
  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

value: `any`


### fontSize

value: `SizeScale`

Size of the typography's font.

### fontWeight

value: `FontWeight`

Sets the weight of the font.

### textOverflow

value: `TextOverflow`

Set how hidden overflow content is signaled to users.

### fontStyle

value: `FontStyle`

Use to emphasize a word or a group of words.

### id

value: `string`

A unique identifier for the element.

## Related

- [Heading](https://shopify.dev/docs/api/admin-extensions/components/titles-and-text/heading)