Components / Typography

Paragraph

Paragraph is a Text rendered as <p> with body-copy defaults — a medium font size and a 1.6 line-height. Reach for it whenever the content is a run of prose.

Loading playground…

What it is

A Text with as="p", fontSize="$md", and lineHeight={1.6}. Margins are zeroed — spacing between paragraphs is the layout's job, handled by the gap on the surrounding Stack. Style props override every default.

Install

Paragraph is exported from usemotif. No separate install.

example.tsx

import { Paragraph } from 'usemotif';

API

Paragraph

stable

function Paragraph(props: ParagraphProps): JSX.Element

…TextPropsOmit<TextProps, "as">

Every Text prop except `as` — Paragraph always renders `<p>`. Style props override the body-copy defaults.

Examples

Body copy:

example.tsx

<Paragraph>
Motif resolves every style prop through the active theme.
</Paragraph>

A run of paragraphs spaced by the parent Stack:

example.tsx

<VStack gap="$3">
<Paragraph>First paragraph.</Paragraph>
<Paragraph>Second paragraph.</Paragraph>
</VStack>

Muted, constrained-width copy:

example.tsx

<Paragraph color="$colors.text.muted" maxW="60ch">
Long-form copy reads best at a constrained measure.
</Paragraph>