---
title: "Paragraph"
description: "Body, lead, small and label paragraphs."
url: https://docs.systhema.app/components/paragraph
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---

`Paragraph` renders a `<p>` in one of four token text styles: body copy, a lead, small print or a label. The style also picks the color, so labels and body text follow the active color system.

```tsx preview title="Paragraph"
import { Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="max-w-xl">
      <Paragraph>
        Systhema turns your Figma variables into CSS variables, Tailwind utilities and typed
        components. Change a token, run a sync, and every page picks it up.
      </Paragraph>
    </div>
  )
}
```

## Import

```tsx
import { Paragraph } from '@systhemaui/next'
```

In a React app without Next.js, import it from `@systhemaui/react`. The API is the same.

## Variants and tags

The `type` prop selects the text style. It defaults to `'body'`.

| `type`  | Classes                  | Use for                                 |
| ------- | ------------------------ | --------------------------------------- |
| `body`  | `text-body color-body`   | Running text                            |
| `lead`  | `text-lead color-body`   | The introduction under a title          |
| `small` | `text-small color-body`  | Captions, footnotes, legal text         |
| `label` | `text-label color-label` | Eyebrows and short labels above a title |

The sizes and colors below come from the default tokens.

```tsx preview title="Paragraph types"
import { Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex max-w-xl flex-col gap-5">
      <Paragraph type="label">Label</Paragraph>
      <Paragraph type="lead">Lead: a short introduction that sets up the section below it.</Paragraph>
      <Paragraph>Body: the default style for running text, set for comfortable reading.</Paragraph>
      <Paragraph type="small">Small: captions, footnotes and the fine print under a form.</Paragraph>
    </div>
  )
}
```

## Examples

### Title block

A label, a heading and a lead together make the standard section intro.

```tsx preview title="Label, heading and lead"
import { Heading, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <Paragraph type="label">Case study</Paragraph>
      <Heading.h3>From Figma to production in a week</Heading.h3>
      <Paragraph type="lead">
        How a four-person team replaced a hand-maintained style guide with tokens.
      </Paragraph>
    </div>
  )
}
```

### Caption under media

`small` fits captions and footnotes.

```tsx preview title="Caption"
import { Image, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <Image
        src="/demo-assets/coast.webp"
        alt="A rocky coastline at dusk"
        width={1800}
        height={1200}
        aspectRatio="3/2"
      />
      <Paragraph type="small">
        The northern coast, photographed for the Northwind spring campaign.
      </Paragraph>
    </div>
  )
}
```

### Scroll reveal

`Paragraph` adds the `animationClasses` from your [Systhema config](https://docs.systhema.app/concepts/configuration.md), so it reveals on scroll like the other text components. Pass `disableAnimation` to render it without them.

```tsx
import { Paragraph } from '@systhemaui/next'

export function Intro() {
  return (
    <Paragraph type="lead" disableAnimation>
      Visible immediately, without a scroll reveal.
    </Paragraph>
  )
}
```

## Props

`Paragraph` also takes every `<p>` attribute and forwards a ref to the element.

<!-- generated:props @systhemaui/react ParagraphProps -->

| Prop                      | Type            | Default | Description |
| ------------------------- | --------------- | ------- | ----------- |
| `type`                    | `ParagraphType` | -       |             |
| `className`               | `string`        | -       |             |
| `disableAnimation`        | `boolean`       | -       |             |
| …and all `<p>` attributes |                 |         |             |

<!-- /generated -->

## HTML and CSS

Without React, combine a text style class with a color class:

```html
<p class="text-label color-label">Case study</p>
<p class="text-lead color-body">How a four-person team replaced a hand-maintained style guide.</p>
<p class="text-body color-body">Running text goes here.</p>
<p class="text-small color-body">The fine print.</p>
```

The `text-*` classes set font family, size, weight, letter spacing and line height from the `typography` and `font` tokens; `color-body` and `color-label` read the typography colors of the active color system. The full list is on [Typography](https://docs.systhema.app/styling/typography.md#quick-reference).

## Next.js

`@systhemaui/next` re-exports `Paragraph` from `@systhemaui/react` unchanged. It is a server-compatible component.

## Accessibility

A `label` paragraph is still a `<p>`: it is not a heading and does not appear in the document outline. When the eyebrow text names the section, keep the real title in the [Heading](https://docs.systhema.app/components/heading.md) that follows it.

## Related

- [Heading](https://docs.systhema.app/components/heading.md)
- [List](https://docs.systhema.app/components/list.md)
- [Typography](https://docs.systhema.app/styling/typography.md)