Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Paragraph

The Paragraph component renders a block of text with appropriate spacing between sibling paragraphs. Use it for body copy, descriptions, and any multi-sentence content. It supports font size, weight, style, and text overflow control through its typography props.

For inline text within a sentence, use Text. For titles, use Heading.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the Paragraph component, which renders a block of text as a distinct paragraph. Use Paragraph to structure your content into readable sections with appropriate spacing.

Anchor to children
children
any

The content to render inside the paragraph. You can pass plain text or other inline components such as Text or Link.

Anchor to fontSize
fontSize

The font size, using the design-system size scale. Values range from small-300 (smallest) through base (default) to large-300 (largest). Prefer semantic heading components for page headings rather than manually increasing font size.

Anchor to fontStyle
fontStyle

The font style. Use italic to emphasize a word or group of words, or to indicate a title, foreign phrase, or other conventionally italicized text.

Learn more about the font-style property.

Anchor to fontWeight
fontWeight

The weight (thickness) of the font. Use bolder weights to create visual emphasis or hierarchy. Values range from light-300 (thinnest) through base (default) to bold-300 (heaviest).

Learn more about the font-weight property.

Anchor to id
id
string

A unique identifier for the element.

Anchor to textOverflow
textOverflow

The behavior for signaling text that overflows its container to users. Currently supports only ellipsis, which truncates the text and appends an ellipsis (…). The element must also constrain its size (such as through maxInlineSize) for truncation to take effect.

Learn more about the text-overflow property.

Anchor to ExamplesExamples

Anchor to Display product sync summaryDisplay product sync summary

Show a sync status message with bolded key figures like the completion time and field count. This example nests Text with fontWeight props inside a Paragraph to emphasize specific details within a sentence.

Display product sync summary

Show a sync status message with bolded key figures like the completion time and field count. This example nests [Text](/docs/api/admin-extensions/2025-07/ui-components/typography-and-content/text) with `fontWeight` props inside a `Paragraph` to emphasize specific details within a sentence.

Display product sync summary

import {reactExtension, Paragraph, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Paragraph>
<Text>Last sync completed at </Text>
<Text fontWeight="bold">2:45 PM EST</Text>
<Text>
. All product tags and metafields were successfully pushed to the
warehouse management system.{' '}
</Text>
<Text fontWeight="bold">24 fields</Text>
<Text> updated across 3 variants.</Text>
</Paragraph>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Paragraph, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const paragraph = root.createComponent(Paragraph);

const intro = root.createComponent(
Text,
{},
'Last sync completed at ',
);
const time = root.createComponent(
Text,
{fontWeight: 'bold'},
'2:45 PM EST',
);
const detail = root.createComponent(
Text,
{},
'. All product tags and metafields were successfully pushed to the warehouse management system. ',
);
const count = root.createComponent(
Text,
{fontWeight: 'bold'},
'24 fields',
);
const suffix = root.createComponent(
Text,
{},
' updated across 3 variants.',
);

paragraph.appendChild(intro);
paragraph.appendChild(time);
paragraph.appendChild(detail);
paragraph.appendChild(count);
paragraph.appendChild(suffix);

stack.appendChild(paragraph);
root.appendChild(stack);
},
);

Anchor to Embed inline links in help textEmbed inline links in help text

Present fulfillment instructions that include an inline Link to external documentation. This example shows how to nest interactive elements inside a paragraph to provide contextual help alongside instructional text.

Embed inline links in help text

import {reactExtension, Paragraph, Text, Link, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Paragraph>
<Text>
This product requires special handling during fulfillment. Review the{' '}
</Text>
<Link
href="https://help.shopify.com/manual/fulfillment"
target="_blank"
>
fulfillment guidelines
</Link>
<Text>
{' '}for packaging requirements and carrier restrictions before
processing orders.
</Text>
</Paragraph>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Paragraph, Text, Link, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const paragraph = root.createComponent(Paragraph);

const intro = root.createComponent(
Text,
{},
'This product requires special handling during fulfillment. Review the ',
);

const link = root.createComponent(
Link,
{
href: 'https://help.shopify.com/manual/fulfillment',
target: '_blank',
},
'fulfillment guidelines',
);

const suffix = root.createComponent(
Text,
{},
' for packaging requirements and carrier restrictions before processing orders.',
);

paragraph.appendChild(intro);
paragraph.appendChild(link);
paragraph.appendChild(suffix);

stack.appendChild(paragraph);
root.appendChild(stack);
},
);

Anchor to Show conditional help textShow conditional help text

Show or hide guidance based on product status retrieved from the GraphQL Admin API. This example queries the product status and conditionally renders a paragraph with publishing instructions when the product is in draft, helping merchants understand what steps remain.

Show conditional help text

import {useState, useEffect} from 'react';
import {reactExtension, useApi, Paragraph, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
const {data, query} = useApi('admin.product-details.block.render');
const productId = data.selected[0]?.id;
const [product, setProduct] = useState(null);

useEffect(() => {
query(
`query Product($id: ID!) {
product(id: $id) {
status
title
}
}`,
{variables: {id: productId}},
).then((result) => setProduct(result?.data?.product));
}, [productId, query]);

if (!product || product.status !== 'DRAFT') return null;

return (
<BlockStack>
<Paragraph>
<Text>
"{product.title}" is currently in draft status. Complete the product
description, add at least one image, and set pricing before publishing
to your storefront.
</Text>
</Paragraph>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Paragraph, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
async (root, api) => {
const {data, query} = api;
const productId = data.selected[0]?.id;

const stack = root.createComponent(BlockStack);

const result = await query(
`query Product($id: ID!) {
product(id: $id) {
status
title
}
}`,
{variables: {id: productId}},
);

const product = result?.data?.product;

if (product?.status === 'DRAFT') {
const helpText = root.createComponent(Paragraph);

const message = root.createComponent(
Text,
{},
`"${product.title}" is currently in draft status. Complete the product description, add at least one image, and set pricing before publishing to your storefront.`,
);

helpText.appendChild(message);
stack.appendChild(helpText);
}

root.appendChild(stack);
},
);

Anchor to Best practicesBest practices

  • Keep paragraphs focused: Each paragraph should convey a single idea or piece of information. Short, focused paragraphs are easier for merchants to scan.
  • Nest Text inside Paragraph for inline formatting: To add emphasis, bold, or other inline styling within a paragraph, nest Text components inside the Paragraph. This preserves the block-level layout while giving you typographic control.
  • Pair with Heading for structure: Place a Heading before a group of paragraphs to give the section a clear title that helps merchants navigate the content.

Anchor to LimitationsLimitations

  • Paragraph doesn't support color or tone props. Text inside a Paragraph always renders in the default body text color.
  • The textOverflow prop takes effect only when the parent container constrains width. Without a width constraint, text will wrap normally rather than truncate.
  • Paragraph doesn't support alignment (center, right). Text always renders with the default start alignment for the current locale direction.
Was this page helpful?