Paragraph

When to use

• Body copy, descriptions and other running text
• Supporting text under a heading, smaller or quieter

Choosing between showing text:

Component	Use it for	Renders	For example
Heading	The title of a page or a section, at a rank in the outline	<h1>–<h6>	A page title, a card title
Paragraph	A block of running text	<p>	Body copy, a description
Text	A run of text inside other text, styled from the tokens	<span>	A date, a count, a name
Kbd	A key or a shortcut	<kbd>	Ctrl + K
Link	Text that goes somewhere	<a>	Read more

Paragraphs stop at a readable line length, around 65 characters, however wide the container. Long lines are hard to follow back to the start of the next one, so the width is capped and never forced — a narrower column still wins.

A smaller, quieter paragraph for supporting text, such as a caption or small print.

import { Paragraph, Stack } from '@arun-dev/ui';

export default function ParagraphBasics() {
  return (
    <Stack gap="sm">
      <Paragraph>
        Paragraphs stop at a readable line length, around 65 characters, however wide the container.
        Long lines are hard to follow back to the start of the next one, so the width is capped and
        never forced — a narrower column still wins.
      </Paragraph>
      <Paragraph size="sm" color="secondary">
        A smaller, quieter paragraph for supporting text, such as a caption or small print.
      </Paragraph>
    </Stack>
  );
}

Paragraph is a <p>. It stops at a readable line length — --paragraph-max-inline-size, 65ch by default — as a maximum, so a narrower container still wins. The last line never ends on a single stranded word, in browsers that support text-wrap: pretty.

Size and colour are inherited unless you set them, so a paragraph inside an Alert or a Card takes the text style there.

Props

Paragraph props

Prop	Type	Default	Description
size	'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'	—	A step on the type scale: the --text-* token of the same name. Inherited from the text around it.
color	'primary' | 'secondary' | 'muted' | 'accent'	—	A text colour role: the --color-text-* token of the same name. Inherited from the text around it.
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.

Notes

• The space between paragraphs belongs to the layout: put them in a Stack.
• To centre a short paragraph, centre the block too: margin-inline: auto along with text-align: center, since it may be narrower than its container.